+ Start a Discussion
Dave BerenatoDave Berenato 

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"
 
$(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. 
Best Answer chosen by Dave Berenato
Steven NsubugaSteven Nsubuga
I have played a bit with your code, and added head and body tags, and also added the JavaScript inline.
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

Steven NsubugaSteven Nsubuga
I have played a bit with your code, and added head and body tags, and also added the JavaScript inline.
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>

 
This was selected as the best answer
Dave BerenatoDave Berenato
Worked great! Thank you!