I am wanting to implement a checkbox that will display a div if checked and hide the div if unchecked.

This is what I have so far:


<script type="text/javascript">
 function handleVersions(div) {
   var j$ = jQuery.noConflict();

   j$(document).ready(function() {      
     j$('.check').on('click', function () {
       if (j$(div).hasClass('visible')){
       else {

Div that calls the Script:

  <div class="check">
     <apex:inputCheckbox value="{!row.selected}">
       <apex:actionSupport event="onclick" onsubmit="handleVersions({!row.section})" rerender="innerCheckboxes"/>

Div that should be refreshed from the called Script:

  <div id="{!row.section}" class="notVisible">
       <apex:pageBlock id="innerCheckboxes">
            <apex:pageBlockSection >
               <apex:selectCheckboxes value="{!row.versionOptions}">
                     <apex:selectOptions value="{!row.versionCheckboxes}"/>

The CSS classes "visible" and "notVisible" are just custom CSS classes that have only one attribute, "display:block" and "display:none" respectively.

When I click the checkbox, the div will show. However I want the div to hide when I unclick the checkbox. Presently, I can only get the div to hide when I unclick then re-click the checkbox. Any ideas?

  • What is div in the javascript? A variable holding the correct div selector?
    – Phil Rymek
    Commented Jun 17, 2013 at 16:09

1 Answer 1


Try to use the toggle() function of the jQuery. Why you are using the click trigger for the div? Use it for the checkbox! Set the ID to the checkbox and listen on it in your jQuery script:

<apex:inputCheckbox value="{!row.selected}" id="myCheBox">

j$(document).ready(function() {      
    j$('[id$=myCheBox]').on('click', function () {

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .