Apex Code Development You need to sign in to do that
Don't have an account?
Javascript Collapsible Table not working in Visualforce
I found a simple collapisble table online: https://codepen.io/andornagy/pen/gaGBZz
And I wanted to use it in a Visualforce page. I copied a simplified version of it, first with the Static Resource I called "Collapisble Table"
And then wrote the Visualforce page accordingly:
It loads property but the click to collapse functionality is missing. This is probably something really simple I'm missing.
And I wanted to use it in a Visualforce page. I copied a simplified version of it, first with the Static Resource I called "Collapisble Table"
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function(){
$(this).parents().next('.hide').toggle();
});
});
And then wrote the Visualforce page accordingly:
<apex:page showheader="false" sidebar="false">
<apex:includeScript value="{!$Resource.CollapsibleTable}"/>
<style>
table {
width: 750px;
border-collapse: collapse;
margin:50px auto;
}
th {
background: #3498db;
color: white;
font-weight: bold;
}
td, th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
.labels tr td {
background-color: #2cc16a;
font-weight: bold;
color: #fff;
}
.label tr td label {
display: block;
}
[data-toggle="toggle"] {
display: none;
}
</style>
<table>
<tbody>
<tbody class="labels">
<tr>
<td colspan="5">
<label for="accounting">Accounting</label>
<input type="checkbox" name="accounting" id="accounting" data-toggle="toggle"/>
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Australia</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Central America</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
</tbody>
</table>
</apex:page>
It loads property but the click to collapse functionality is missing. This is probably something really simple I'm missing.
This version works.
<apex:page showheader="false" sidebar="false" standardStylesheets="false"> <head lang="en"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> </head> <body> <script> $(document).ready(function() { $('[data-toggle="toggle"]').change(function(){ $(this).parents().next('.hide').toggle(); }); }); </script> <style> table { width: 750px; border-collapse: collapse; margin:50px auto; } th { background: #3498db; color: white; font-weight: bold; } td, th { padding: 10px; border: 1px solid #ccc; text-align: left; font-size: 18px; } .labels tr td { background-color: #2cc16a; font-weight: bold; color: #fff; } .label tr td label { display: block; } [data-toggle="toggle"] { display: none; } </style> <table> <tbody> <tbody class="labels"> <tr> <td colspan="5"> <label for="accounting">Accounting</label> <input type="checkbox" name="accounting" id="accounting" data-toggle="toggle" /> </td> </tr> </tbody> <tbody class="hide"> <tr> <td>Australia</td> <td>$7,685.00</td> <td>$3,544.00</td> <td>$5,834.00</td> <td>$10,583.00</td> </tr> <tr> <td>Central America</td> <td>$7,685.00</td> <td>$3,544.00</td> <td>$5,834.00</td> <td>$10,583.00</td> </tr> </tbody> </tbody> </table> </body> </apex:page>All Answers
This version works.
<apex:page showheader="false" sidebar="false" standardStylesheets="false"> <head lang="en"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> </head> <body> <script> $(document).ready(function() { $('[data-toggle="toggle"]').change(function(){ $(this).parents().next('.hide').toggle(); }); }); </script> <style> table { width: 750px; border-collapse: collapse; margin:50px auto; } th { background: #3498db; color: white; font-weight: bold; } td, th { padding: 10px; border: 1px solid #ccc; text-align: left; font-size: 18px; } .labels tr td { background-color: #2cc16a; font-weight: bold; color: #fff; } .label tr td label { display: block; } [data-toggle="toggle"] { display: none; } </style> <table> <tbody> <tbody class="labels"> <tr> <td colspan="5"> <label for="accounting">Accounting</label> <input type="checkbox" name="accounting" id="accounting" data-toggle="toggle" /> </td> </tr> </tbody> <tbody class="hide"> <tr> <td>Australia</td> <td>$7,685.00</td> <td>$3,544.00</td> <td>$5,834.00</td> <td>$10,583.00</td> </tr> <tr> <td>Central America</td> <td>$7,685.00</td> <td>$3,544.00</td> <td>$5,834.00</td> <td>$10,583.00</td> </tr> </tbody> </tbody> </table> </body> </apex:page>