My table header is looking like this:-
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;">
<div class="panel-heading"> <h3 class="panel-title">Info</h3> </div>
<div class="panel-body">blahh</div>
</div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true" >
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
</table>
</div>
</div>
I want to full hide this entire ID column with the id="hidethis".
What I tried :
<th id="hidethis" data-field="product_id" style="display:none;">ID</th>
this didn't do anything, I think that css cannot be used like that in a th.
$('hidethis').hide();
No impact with that jquery also.
$('td:nth-child(2),th:nth-child(2)').hide();
The closest success I had with this, but that only hidden my Image th, but all my buttons remained there.
I will also put a picture:
I want to full hide all of the marked with red.
I've tried to make my code as easy as possible and also included some comments.
I would consider using a class instead of an id though. :)
// Save index (position) of th
const cellIndex = $('#hidethis').index();
// Hide th first
$('#hidethis').hide();
// Iterate over each table row
$('#scale_missed_entries tbody tr').each(function () {
// Select the cell with same index (position) as the table header
const cell = $(this).children('td').get(cellIndex);
// Hide 'em
$(cell).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
</div>
<div class="panel-body">blahh</div>
</div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
Simply using CSS
[data-field="product_id"] {
display: none;
}
tr td:nth-of-type(1) {
display: none;
}
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
</div>
<div class="panel-body">blahh</div>
</div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
<tr>
<td>1
</td>
<td>10
</td>
<td>100
</td>
<td>1000
</td>
</tr>
</thead>
</table>
</div>
</div>
As i commented also apply a same class to th and there corresponding values <td> and hide them. it will work.
$('.hidethis').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">blahh</div></div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true" >
<thead>
<tr>
<th class="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hidethis" data-field="product_id">112</td>
<td data-field="product_weight">51</td>
<td data-field="product_added_date">2017-10-11</td>
<td data-field="button">hi1</td>
</tr>
<tr>
<td class="hidethis" data-field="product_id">111</td>
<td data-field="product_weight">50</td>
<td data-field="product_added_date">2017-10-10</td>
<td data-field="button">hi</td>
</tr>
</tbody>
</table>
</div>
</div>
Note:- without jquery also you can now hide then through css:-
.hidethis{
display:none; // or visibility:hidden;
}
Add:
#hidethis { display: none; }
to your css:
#hidethis {
display: none;
}
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;">
<div class="panel-heading">
<h3 class="panel-title">Info</h3>
</div>
<div class="panel-body">blahh</div>
</div>
<table id="scale_missed_entries"
data-toggle="table"
data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th> <th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
</table>
</div>
</div>
Hope it helps.
Just use this
#scale_missed_entries th:nth-child(1) {
display: none;
}
edit based on the coment
To hide entire column use this--
#hidethis{
display:none;
}
#myTable th:nth-child(1) {
display: none;
}
#hidethis{
display:none;
}
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">blahh</div></div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
<tr>
<td id="hidethis">1
</td>
<td>10
</td>
<td>100
</td>
<td>1000
</td>
</tr>
</thead>
</table>
</div>
</div>
Related
I am new to Bootstrap and Html. I am currently trying to separate my Add Person button away from the panel body but I do not know how to achieve that. Below is the screenshot of my problem and my current codes:
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<div class="panel-heading">
Manage Person
</div>
</div>
</div>
<div class="btn-group pull-right">
<a asp-action="Create" asp-controller="Persons" class="btn btn-primary btn-group-sm">
Add Person
</a>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Height</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rachel</td>
<td>25</td>
<td>Female</td>
<td>175cm</td>
</tr>
<tr>
<td>Thomas</td>
<td>15</td>
<td>Male</td>
<td>165cm</td>
</tr>
<tr>
<td>Jared</td>
<td>40</td>
<td>Male</td>
<td>195cm</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Use clearfix div as sugggested below. And add margin-top: 10px; on the panel-body
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="panel panel-primary">
<div class="panel-heading ">
<div class="panel-heading">
Manage Person
</div>
</div>
</div>
<div class="btn-group pull-right" style="float: right;">
<a asp-action="Create" asp-controller="Persons" class="btn btn-primary btn-group-sm">
Add Person
</a>
</div>
<div class="clearfix"></div>
<div class="panel-body" style="margin-top: 10px;">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Height</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rachel</td>
<td>25</td>
<td>Female</td>
<td>175cm</td>
</tr>
<tr>
<td>Thomas</td>
<td>15</td>
<td>Male</td>
<td>165cm</td>
</tr>
<tr>
<td>Jared</td>
<td>40</td>
<td>Male</td>
<td>195cm</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="btn-group pull-right">
<a asp-action="Create" style="margin-bottom:5px" asp-controller="Persons" class="btn btn-primary btn-group-sm">
Add Person
</a>
</div>
you can use margin-bottom.
This would be my way to fix this:
Give your button an id and add bottom margin within your css:
#yourButtonId{ margin-bottom: 10px; }
OR
Put your Button in a new bootstrap row: <div class="row"> ---Your button code--- </div>
I need to hide head and column using jQuery. The below code doesn't work.
$('#MD116139889_ZIPCODE_InputField').find('.input-group-addon').click(function(){
$('.116141670_ZIPCODE_IDPopupHead').hide();
$('.116141670_ZIPCODE_IDPopupCol').hide();
});
Table Image
<div id="MD116139889_ZIPCODE_dialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 76px; max-height: none;">
<div id="popUpContentResult" class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th width="30%" height="19" class="text-center 116141670_ZIPCODE_IDPopupHead">ZipId</th>
<th class="text-center 116141670_ZIPCODEPopupHead">Zip Code</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" class="text-center 116141670_ZIPCODE_IDPopupCol">00196</td>
</tr>
</tbody>
I took off the find() of the bind for a simple test case, but it seems to work fine.
$('#MD116139889_ZIPCODE_InputField').click(function() {
$('.116141670_ZIPCODE_IDPopupHead').hide();
$('.116141670_ZIPCODE_IDPopupCol').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MD116139889_ZIPCODE_dialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 76px; max-height: none;">
<div id="popUpContentResult" class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th width="30%" height="19" class="text-center 116141670_ZIPCODE_IDPopupHead">ZipId</th>
<th class="text-center 116141670_ZIPCODEPopupHead">Zip Code</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" class="text-center 116141670_ZIPCODE_IDPopupCol">00196</td>
</tr>
</tbody>
</table>
</div>
</div>
<button id="MD116139889_ZIPCODE_InputField">Click Me</button>
<div ng-controller="reportCtrl">
<table class="table table-hover">
<thead class="row col-md-3">
<tr class="row">
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params" class="row col-md-3">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
I have this table, when i'm using the bootstrap grid system with ng-repeat the results are very strange..
I've tried to play with the grid system but it dosent seem that it helps..
You do not need to add the row col-md-3 classes to the table-body or the row class to the tr elements. Also if you are repeating the items your ng-repeat needs to be on the tr element, if it is on the tbody element you are going to have multiple unnecessary tbody elements.
Please see working example
If you just want a simple table:
<div ng-controller="TestController as vm">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.items">
<td>{{$index}}</td>
<td>{{item}}</td>
</tr>
</tbody>
</table>
</div>
JS:
var myApp = angular.module('myApp',[])
.controller('TestController', ['$scope', function($scope) {
var self = this;
self.items = ['one', 'two', 'three', 'four'];
}])
If you do not need the table element you can use the bootstrap row and col-* classes
<div class="row">
<div class="col-sm-6">
<h1>Key</h1>
</div>
<div class="col-sm-6">
<h1>Value</h1>
</div>
</div>
<div class="row" ng-repeat="item in vm.items">
<div class="col-sm-6">
{{$index}}
</div>
<div class="col-sm-6">
{{item}}
</div>
</div>
Try remove the class="row .."
<div ng-controller="reportCtrl">
<table class="table table-hover">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr>
<td>{{param.key}}</td>
<td>{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
Remove the bootstrap classes row, col-md-6 in tbody ,use the below code..
for all medias, it will be resized
<div ng-controller="reportCtrl" class="table-responsive>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr>
<td>{{param.key}}</td>
<td>{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
<div ng-controller="reportCtrl">
<table class="table table-hover">
<div class="row col-md-3">
<thead class="row">
<tr>
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</div>
</table>
I have made few changes, like covered the entire table into 3 divisions and then
dividing them further into 6-6 for ths and tds. Just see if it works.
You may try this code
By removing the col-md-3
and style the table with width:auto
<div ng-controller="reportCtrl">
<table class="table table-hover" style="width:auto">
<thead class="row ">
<tr class="row">
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params" class="row ">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
<tbody ng-repeat="param in params" class="row ">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
I have the following code jQuery
$(".col-md-12").hide();
$(".button-div").hide();
$(".featurette-divider").hide();
$(".footer").hide();
$(".first").fadeIn(1000);
$(".second").delay(900).fadeIn(1000);
$(".third").delay(1800).fadeIn(1000);
$(".fourth").delay(2700).fadeIn(1000);
$(".button-div").delay(3600).fadeIn(1000);
$(".featurette-divider").delay(4000).fadeIn(1000);
$(".footer").delay(5000).fadeIn(1000);
I want to make the page scroll by itself to the bottom as the elements appear on it.
EDIT 1
<div class="container">
<div class="col-md-12 first">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 second">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 third">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 fourth">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="centered button-div">
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger btn-lg">Next <span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
<hr class="featurette-divider">
<!-- FOOTER -->
<footer class="footer">
<p>© 2015 · About · Contact</p>
</footer>
</div>
My HTML layout (Bootrstrap based). I've pasted the wrapper where all the content goes (.container)
If you use JQuery's scrolltop function, you can scroll your page to a given height in pixels:
$(document).scrollTop(heightInPixels);
This would scroll your whole document to the end:
var documentHeight = $(document).height();
$(document).scrollTop(documentHeight);
If you want this to happen as each element appears, you will have to call this everytime after the effect, or put a callback when the effects are over:
function scrollDocument(){
var documentHeight = $(document).height();
$(document).scrollTop(documentHeight);
}
// Element "appearings"
$(".first").fadeIn(1000, scrollDocument );
....
$( ".footer" ).delay(5000).fadeIn(1000, scrollDocument );
I hope this helps. To help more, I should have more info about your layout...
EDIT
$(".col-md-12").hide();
$(".button-div").hide();
$(".featurette-divider").hide();
$(".footer").hide();
function scrollDocument(){
var contentHeight = $(document).height();
$(document).scrollTop(contentHeight);
}
// Element "appearings"
$(".first").fadeIn(1000, scrollDocument);
$(".second").delay(900).fadeIn(1000, scrollDocument);
$(".third").delay(1800).fadeIn(1000, scrollDocument);
$(".fourth").delay(2700).fadeIn(1000, scrollDocument);
$(".button-div").delay(3600).fadeIn(1000, scrollDocument);
$(".featurette-divider").delay(4000).fadeIn(1000, scrollDocument);
$(".footer").delay(5000).fadeIn(1000, scrollDocument);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-12 first">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description1</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 second">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 third">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description3</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="col-md-12 fourth">
<div class="thumbnail">
<div class="caption">
<h3>hero name</h3>
<img src="..." alt="...">
<p></p>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7">
</colgroup>
<thead>
<tr>
<th colspan="2" style="text-align:center">Abilities</th>
</tr>
<tr>
<th>Name</th>
<th>Description4</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
<code>.active</code>
</th>
<td>Applies the hover color to a particular row or cell</td>
</tr>
<tr>
<th scope="row">
<code>.success</code>
</th>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<th scope="row">
<code>.info</code>
</th>
<td>Indicates a neutral informative change or action</td>
</tr>
<tr>
<th scope="row">
<code>.warning</code>
</th>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<th scope="row">
<code>.danger</code>
</th>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- end col-lg-6 -->
<div class="centered button-div">
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger btn-lg">Next <span class="glyphicon glyphicon-arrow-right"></span></button>
</div>
<hr class="featurette-divider">
<!-- FOOTER -->
<footer class="footer">
<p>© 2015 · About · Contact</p>
</footer>
</div>
Just chage the $(document) selector by your $('div.container') on the code above and that should work.
I have a listview with multiple collapsible content (tree-like). The filter automatically expand the last block from collapsible-sets, and not the true block/div (value from that collapsible div) searched.
DEMO
Here is the code:
<script>
$("#mineralslist").on("filterablefilter", function (event, ui) {
if ($("#mineralslist .ui-screen-hidden").length == 0) {
$('#mineralslist [data-role="collapsible"]').collapsible("collapse");
} else {
$('#mineralslist [data-role="collapsible"]').collapsible("expand");
}
});
</script>
<div data-role="content" id="iama">
<ul data-role="listview" id="mineralslist" data-inset='true' data-filter="true" data-filter-placeholder="Search mineral...">
<li>
<div data-role="collapsible" data-inset='false'>
<h3>Native elements</h3>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h3>Gold group</h3>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h4>Gold</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>Au</td>
<td>Isometric</td>
<td>Rich yellow</td>
</tr>
</tbody>
</table>
</div>
<div data-role="collapsible">
<h4>Silver</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ag</td>
<td>Isometric</td>
<td>Silver-white</td>
</tr>
</tbody>
</table>
</div>
<div data-role="collapsible">
<h4>Copper</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cu</td>
<td>Isometric</td>
<td>Brown, copper red, light pink, red</td>
</tr>
</tbody>
</table>
</div>
<div data-role="collapsible">
<h4>Lead</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pb</td>
<td>Isometric</td>
<td>Grey, but often coated</td>
</tr>
</tbody>
</table>
</div>
<div data-role="collapsible">
<h4>Aluminum</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>Al</td>
<td>Isometric</td>
<td>Grayish-White</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div data-role="collapsible">
<h3>Platinum group</h3>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h4>Platinum</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pt</td>
<td>Isometric</td>
<td>Steel grey to dark grey</td>
</tr>
</tbody>
</table>
</div>
<div data-role="collapsible">
<h4>Iridium</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>(Ir,Os,Ru)</td>
<td>Isometric</td>
<td>White</td>
</tr>
</tbody>
</table>
</div>
<div data-role="collapsible">
<h4>Palladium</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>(Pd,Pt)</td>
<td>Isometric</td>
<td>White</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div data-role="collapsible">
<h3>Carbon Polymorph group</h3>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h4>Diamond</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>C</td>
<td>Isometric</td>
<td>Colourless</td>
</tr>
</tbody>
</table>
</div>
<div data-role="collapsible">
<h4>Graphite</h4>
<table data-role="table" id="mineral-table" class="ui-shadow table-stroke">
<thead>
<tr>
<th class="label">Formula</th>
<th class="label">System</th>
<th class="label">Colour</th>
</tr>
</thead>
<tbody>
<tr>
<td>C</td>
<td>Hexagonal</td>
<td>Iron black to steel-grey</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div data-role="collapsible" data-inset='false'>
<h3>Organic compounds</h3>
<p>Answer.</p>
</div>
</li>
</ul>
</div>
Example: I want to search for Iridium and I obtain these:
What I'm trying to obtain is to expand only the block filtered. Like in this image:
Try jQ :contains() selector`s prefix
var s = $('input').val() // itidium
var list = $('#mineralslist').find('h4:contains("'+s+'")').css({'display':'block','opacity':1})
And after you must show all parent elements of list