Expend/collapse table rows in jQuery - javascript

Check the code bellow. My code currently working fine but when I click "More" button its expends all rows and once i click "Less" it collapse all rows. My goal is: by default display only first 6 rows when I click more it will load reset all available rows. Then when I click "Less" it will collapse only the expended rows the 6 rows will be as like default position. And if the rows less then 6 then this button will just not do anything. Also if possible I wanted slow dropdown not slow hide/show.
How can I achieve that?
$(".table").children("tbody").hide();
$("#expendbtn").html("More");
$("#expendbtn").click(function(){
if ($("#expendbtn").text()=="More") {
$(".table").children("tbody").show("slow");
$("#expendbtn").html("Less");
} else {
$(".table").children("tbody").hide("slow");
$("#expendbtn").html("More");
}
});
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
</body>
</html>


This will work for you.
A simple tweak inside you script, I have changed this ↓
$(".table").children("tbody").hide();
to this ↓
$(".table").find("tr").hide().slice(0, 7).show();
A working fiddle for you. ↓
$(".table").find("tr").hide().slice(0, 7).show();
$("#expendbtn").html("More");
$("#expendbtn").click(function() {
if ($("#expendbtn").text() == "More") {
$(".table").find("tr").show();
$("#expendbtn").html("Less");
} else {
$(".table").find("tr").hide().slice(0, 7).show();
$("#expendbtn").html("More");
}
});
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th>
<h4>Main Cat</h4>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
</body>
</html>
Updated 2 with transition
$(".table").find("tr:nth-child(6)").nextAll().addClass('slideUp');
$("#expendbtn").html("More");
$("#expendbtn").click(function() {
if ($("#expendbtn").text() == "More") {
$(".table").find("tr").removeClass('slideUp');
$("#expendbtn").html("Less");
} else {
$(".table").find("tr:nth-child(6)").nextAll().addClass('slideUp');
$("#expendbtn").html("More");
}
});
.table tbody{
}
.table tr{
transition: all ease-in-out 0.4s;
overflow:hidden;
max-height:100px;
}
.table tr.slideUp{
transform: scaleY(0);
display:block;
max-height:0px;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th>
<h4>Main Cat</h4>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
</body>
</html>


Here you go with a solution https://jsfiddle.net/v5pvxujp/1/
$("#expendbtn")
.html("More")
.click(function(){
if ($("#expendbtn").text()=="More") {
$('table tr:nth-child(n+7)').fadeIn('slow');
$("#expendbtn").html("Less");
} else {
$('table tr:nth-child(n+7)').fadeOut('slow');
$("#expendbtn").html("More");
}
});
.hideRow {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr class="hideRow">
<td>Sub cat</td>
</tr>
<tr class="hideRow">
<td>Sub cat</td>
</tr>
<tr class="hideRow">
<td>Sub cat</td>
</tr>
<tr class="hideRow">
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
Hope this will help you.


A working, shorter and expendable example:
/**
* Hide every row from +irow+
* If +animateIt+ is true, animate the dropdown
*
*/
function hideRowsStartingAt(irow, animateIt)
{
$(".table tbody").children("tr:nth-child(n+"+irow+")").hide(animateIt ? 'slow' : null);
}
// Set up
hideRowsStartingAt(7);
$("#expendbtn").html("More");
// Wait (for click) and see
$("#expendbtn").click(function(){
// Collapse or expend ?
var doExpend = $("#expendbtn").text() == "More" ;
if ( doExpend )
{
$(".table tbody").children("tr").show('slow');
}
else // doCollapse
{
hideRowsStartingAt(7, true);
}
// Button name is now…
$("#expendbtn").html(doExpend ? 'Less' : 'More') ;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>

Related

How to make table columns more even?

I am using Bootstrap to build a website that calculates some one-variable statistics and displays the result. However, when the results are displayed, the table looks very uneven, as shown here (in the bottom table:
The contents of the table rows are filled by a JavaScript function (which does work).
.table {
width: 80vw;
content-align: center;
margin: 20px auto;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Statistics</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"> </script>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">Mean</th>
<th scope="col">Mode</th>
<th scope="col">Standard Deviation</th>
<th scope="col">Variance</th>
<th scope="col">Range</th>
</tr>
</thead>
<tbody>
<tr id="others">
</tr>
</tbody>
</table>
</body>

<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table class="table table-striped table-hover responsive" style="width:100%">
<thead>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
</thead>
<tbody>
<tr>
<td>hi 1</td>
<td>hi 2</td>
<td>hi 3</td>
<td>hi 4</td>
<td>hi 5</td>
<td>hi 6</td>
</tr>
<tr>
<td>hi 1</td>
<td>hi 2</td>
<td>hi 3</td>
<td>hi 4</td>
<td>hi 5</td>
<td>hi 6</td>
</tr>
</tbody>
</table>

1- THs needs to be inside a TR (table row)
2- TH and TD needs to match (use colspan to match if you don't have the relative TD).
<tbody>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
</tr>
</thead>
<tbody>
<tr id="others">
<td colspan="6"></td>
</tr>
</tbody>
</tbody>

Bootstrap tooltip pushed my right side contents away

I added tooltip in my table's 2nd column but it is pushiing my last column away.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!">Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!">Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

You can just add data-container="body" in your HTML in this way:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td data-toggle="tooltip" data-container="body" data-placement="top" title="Hooray!">Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td data-toggle="tooltip" data-container="body" data-placement="top" title="Hooray!">Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
or can add {container: 'body'} to your JavaScript in this way:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({container: 'body'});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!">Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!">Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
EDIT:
If you want your tooltip to be on text instead of td you can create an inner element like span and add tooltip on that item. Try this way:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>
<span data-toggle="tooltip" data-container="body" data-placement="top" title="Hooray!">Defaultson</span>
</td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td>
<span data-toggle="tooltip" data-container="body" data-placement="top" title="Hooray!">Doe</span></td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!" data-container="body">Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td data-toggle="tooltip" data-placement="top" title="Hooray!" data-container="body">Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
just add data-container="body"
<td data-toggle="tooltip" data-placement="top" title="Hooray!" data-container="body">Defaultson</td>

try this way :
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td><p data-toggle="tooltip" data-placement="top" title="Hooray!">Defaultson</p></td>
<td>def#somemail.com</td>
</tr>
<tr class="success">
<td>Success</td>
<td><p data-toggle="tooltip" data-placement="top" title="Hooray!">Doe</p></td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

edit <tbody> like
<tbody>
<tr data-toggle="tooltip">
<td>Default</td>
<td data-placement="top" title="Hooray!">Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="success" data-toggle="tooltip">
<td>Success</td>
<td data-placement="top" title="Hooray!">Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
this. put data-toggle="tooltip" into <tr> tag

Multiple table row extend/collapse

Check my code bellow. When i click More button its display all rows after 6th number. But my goal is to use it on multiple table because the table is generated dynamically on my project. I am having lot of tables so it needs to be work with multiples table. I have tried to use same on two table now when i click on button another table also displays. Whats the solution then for multiple tables?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
<script type="text/javascript">
$(".table").find("tr").hide().slice(0, 7).show();
$("#expendbtn").html("More");
$("#expendbtn").click(function() {
if ($("#expendbtn").text() == "More") {
$(".table").find("tr").show();
$("#expendbtn").html("Less");
} else {
$(".table").find("tr").hide().slice(0, 7).show();
$("#expendbtn").html("More");
}
});
</script>
</body>
</html>

You have made some several mistakes in your jquery:
1) As you says all elements will be dynamically generated, so the elements will never get fires the click event, you must use on() for dynamic elements.
2) Use classes for buttons instead of id. Id must be unique.
3) Use prev() method with this, wich reference to button, so you will always be in the table wich correspond the button clicked.
4) Use each() method to iterate over all tables and hide the tr all you need, like you actually have it only works for the first table.
5) You arent using slice propertly, wich selects a subset of elements based on its index.
Heres the working example:
$(document).ready(function() {
$(".table").each(function() {
$(this).find('tr').slice(7).hide();
});
$(".expendbtn").html("More");
$(document).on("click", '.expendbtn', function() {
if ($(this).text() == "More") {
$(this).prev(".table").find("tr").show();
$(this).html("Less");
} else {
$(this).prev(".table").find('tr').slice(7).hide();
$(this).html("More");
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat 1</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info expendbtn"></button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat 2</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info expendbtn"></button>
</div>
</div>
</body>
</html>

You should never use an id more than once. The better way to do it is to use a class instead of an id.
Provided in the jsfiddle is a working example.
$(".table").find("tr").hide().slice(0, 7).show();
$(".expendbtn").html("More");
$(".expendbtn").click(function() {
if ($(this).text() == "More") {
console.log($(this).parent());
$(this).parent().find('.table').find("tr").show();
$(this).html("Less");
} else {
$(this).parent().find('.table').find("tr").hide().slice(0, 7).show();
$(this).html("More");
}
});
http://jsfiddle.net/g8fzxzcc/1

Your problem is button has the same ID.
In HTML, id attribute must be unique in page
Use class attribute instead.
This should work :
<button type="button" class="btn btn-info expendbtn"></button>
<script>
$(".table").find("tr").hide().slice(0, 7).show();
$(".expendbtn").html("More");
$(".expendbtn").click(function() {
var foundTr = $(this).parent().find('tr');
if ($(this).text() == "More") {
foundTr.show();
$(this).html("Less");
} else {
foundTr.hide().slice(0, 7).show();
$(this).html("More");
}
});
</script>
Otherwise, i advice people to use jquery.Datatable plugin, it's
fantastic ! It contains automatic search field, pagination, ajax loading, and expandable rows like you want ;)

You can remove the ids from the more/less buttons and use class (or just rename the ids but still add a class):
<button type="button" class="btn btn-info btn-expand">More</button>
And use the class as the selector:
$('.btn-expand').click(function () {
var $btn = $(this);
var $rows = $btn.prev('.table').find('tr');
if ($btn.text() === 'More') {
$rows.show();
$btn.text('Less');
} else {
$rows.slice(7).hide();
$btn.text('More');
}
});
Also, jQuery's slice creates a new jQuery object containing all the matching elements. So what you're doing is creating a jQuery object with all the rows from all the tables. If that's not what you want, your code should probably be:
$('.table').each(function () {
$(this).find('tr').slice(7).hide();
});
$('.table').each(function () {
$(this).find('tr').slice(7).hide();
});
$('.btn-expand').click(function () {
var $btn = $(this);
var $rows = $btn.prev('.table').find('tr');
if ($btn.text() === 'More') {
$rows.show();
$btn.text('Less');
} else {
$rows.slice(7).hide();
$btn.text('More');
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th>
<h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info btn-expand">More</button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th>
<h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info btn-expand">More</button>
</div>
</div>

Here you go with a solution
$(".table").find("tr").hide().slice(0, 7).show();
$('button').html("More");
$("button").click(function() {
if ($(this).text() == "More") {
$(this).siblings('table').find("tr").show();
$(this).html("Less");
} else {
$(this).siblings("table").find("tr").hide().slice(0, 7).show();
$(this).html("More");
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info"></button>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info""></button>
</div>
</div>
</div>
I've used jQuery siblings to get the table.
id should be unique.
Hope this will help you.

Data-toggle colapse wont display the right target in bootstrap

I have a data-toggle in tr and once click,the underlying tr will display in the last part of all the tr. Example: If I click the name John, its corresponding tr with <td>test2</td> will display in the last part.Let us say, it will display under Genrevel. What is wrong with my javascript?
$(function() {
$("#example1").DataTable();
});
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.css">
<table id="example1" class="table table-bordered" style="border-collapse:collapse;">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr>
<td><a data-toggle="collapse" data-parent="#accordion" href="#accordionOne"> Joseph</a></td>
<td>15</td>
<td>8</td>
</tr>
<tr id="demo1" class="accordian-body collapse">
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
<tr>
<td><a data-toggle="collapse" data-parent="#accordion" href="#accordionOne"> John</a></td>
<td>12</td>
<td>6</td>
</tr>
<tr id="accordionOne" class="panel-collapse collapse">
<td>test 2</td>
<td>test 2</td>
<td>test 2</td>
</tr>
<tr>
<td><a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo"> Genrevel</a></td>
<td>10</td>
<td>5</td>
</tr>
<tr id="accordionTwo" class="panel-collapse collapse">
<td>test 3</td>
<td>test 3</td>
<td>test 3</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bootstrap override not taking effect

I am trying to override a bootstrap class using JavaScript. The problem is that value of display is changed by the Javascript code but the HTML rows aren't displayed. If I use !important in the style block in custom.css bootstrap is overridden and the JavaScript assignment is still the HTML rows aren't displayed....can anyone tell me whats wrong here. I did try using an ID then chaining the elements (#id.class) that didn't work either. (the code works fine without bootstrap)
custom css
body {
margin-top:30px;
}
.hidden
{
display: none;
}
HTML
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script> src="js/bootstrap.min.js"</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<table class="hidden table table-striped table-border">
<tbody>
<tr class="hidden">
<td>List ............</td>
</tr>
<tr class="hidden active">
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr class="hidden">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="hidden">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="hidden">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr class="hidden">
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr class="hidden">
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="well col-md-8">
<p>Test Messages.........</p>
</div>
</div>
</body>
<script type="text/javascript">
var count=4;
var activerows=document.getElementsByClassName("hidden");
if(count <= activerows.length){
for (var i=0; i<count; i++)
{
activerows[i].style.display="block";
}
}else
{
for (var i=0; i<activerows.length; i++)
{
// activerows[i].style.display='block';
}
}
</script>
</html>

If Bootstrap is the main culprit then don't use its class and simply use your custom class hideme or something and then override it using Javascript like I have done in this snippet below:
var count = 4;
var activerows = document.getElementsByClassName("hideme"),
tablehasClass = document.getElementById("table").classList;
if (count <= activerows.length) {
tablehasClass.remove("hideme");
for (var i = 0; i < count; i++) {
activerows[i].style.display = "table-row";
}
} else {
for (var i = 0; i < activerows.length; i++) {
// activerows[i].style.display='';
}
}
body {
margin-top: 30px;
}
.hideme {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<table id="table" class="hideme table table-striped table-border">
<tbody>
<tr class="hideme">
<td>List ............</td>
</tr>
<tr class="hideme active">
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr class="hideme">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="hideme">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="hideme">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr class="hideme">
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr class="hideme">
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="well col-md-8">
<p>Test Messages.........</p>
</div>
</div>
</body>
</html>
table is very keen of its elements so never use display: block us display: table-row for tr, display: table-cell for td and similarly display: table for table

Instead of setting the style from javascript you should remove the class from the element.
Alternatively you can set the cssText of the element style to display:block !important
var count=4;
var activerows=document.getElementsByClassName("hidden");
if(count <= activerows.length){
for (var i=0; i<count; i++)
{
activerows[i].style.cssText = 'display:block !important';
}
}else
{
for (var i=0; i<activerows.length; i++)
{
// activerows[i].style.display='block';
}
}
body {
margin-top:30px;
}
.hidden
{
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-8">
<table class="hidden table table-striped table-border">
<tbody>
<tr class="hidden">
<td>List ............</td>
</tr>
<tr class="hidden active">
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr class="hidden">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="hidden">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="hidden">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr class="hidden">
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr class="hidden">
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="well col-md-8">
<p>Test Messages.........</p>
</div>
</div>

Please change this row
activerows[i].style.display="block";
with
$(activerows[i]).attr("style", "display: block !important");
or
$(activerows[i]).removeClass('hidden');
You need !important again to override the previous !important.
https://jsfiddle.net/nqtafyg2/6/

Categories

Resources