CODEWITHSUNDEEP
javascripthtmlcss
Our Man in Bananas
Our Man in Bananas

Reputation: 5981

showing and hiding DIV using css

I have the below code in my ASP (CLassic) page (part of a page with dozens of checkboxes set from the db):

<tr height="30px">
        <td class="summarytext">Show Gender Pay Gap Options</td>
        <td class="formtext">
                <input class="checkbox" type="checkbox" name="chkDisplayGPGOptions" <%if g_blnchkDisplayGPGOptions = True then Response.Write("checked")%>>
        </td>
    <td colspan="7">&nbsp;</td>
    <td>
            <input type="button"  class="help" align="left" id="Button3" onmousemove="javascript:DisplayHelp(150,-160, 10, 'HELP', 'Select if you want to exclude this pay type in netpay for attachment calculations.', this)" onmouseout="javascript:HideHelp()" WIDTH="16px" HEIGHT="16px">
    </td>
    <DIV id="divGPGOptiona" style="display:none">
        <table>
            <tr height="30px">
                <td class="summarytext">Include Bonus in calculation for GPG reporting</td>
                <td class="formtext">
                        <input class="checkbox" type="checkbox" name="chkIncludeBonusInGPG" <%if g_blnchkDisplayGPGOptions = True then Response.Write("checked")%>>
                </td>                                                    
            </tr>
            <tr height="30px">
                <td class="summarytext">Include Gross Pay in calculation for GPG reporting</td>
                <td class="formtext">
                        <input class="checkbox" type="checkbox" name="chkIncludeGrossPayInGPG" <%if g_blnchkDisplayGPGOptions = True then Response.Write("checked")%>>
                </td>                                                    
            </tr>
        </table>
    </DIV>
</tr>

what I'd like to do is show and hide the DIV divGPGOptiona when the checkbox chkDisplayGPGOptions is checked...

Is there was some way of using just CSS for this, or will I need to do this with JavaScript and the DOM?

Upvotes: 1

Views: 84

Answers (4)

Adjit
Adjit

Reputation: 10305

Pure CSS using the siblings + selector.

So this can be done if you have the div as a sibling of the checkbox. In order for you to replicate, you would need to change your HTML structure. Which is advised, because you are placing a div inside a table row <tr>, without a table cell. Why?

.checkboxSibling {
  display: none;
}

/*.checkbox:checked + .checkboxSibling {
  display: block;
 }*/

input[name="chkDisplayGPGOptions"]:checked + .checkboxSibling {
  display: block;
}
<div>
  Input 1 -
  <input class="checkbox" name="chkDisplayGPGOptions" type="checkbox"/>
  <div class="checkboxSibling">Checkbox Checked</div>
</div>

<div>
  Input 2 -
  <input class="checkbox" name="someOtherName" type="checkbox"/>
  <div class="checkboxSibling">Checkbox Checked</div>
</div>

Upvotes: 1

M.Topa
M.Topa

Reputation: 64

CSS Code:

.hidden{ display: none; }

html Code:

 <DIV id="divGPGOptiona" class="hidden" >

Jquery Code:

    $(".checkbox").on('click',function(){
         if($(".checkbox").prop("checked")){
            $("#divGPGOptiona").removeClass("hidden");
         }
        else{
          $("#divGPGOptiona").addClass("hidden");
        }
     });

Upvotes: 2

Richard Hamilton
Richard Hamilton

Reputation: 26434

One possible solution is to toggle the display with JavaScript. You don't need jQuery for this. It can be done in native JavaScript.

var checkBox = document.getElementById("check-box");
var myDiv = document.getElementById("my-div");
myDiv.style.display = "none";

checkBox.addEventListener("click", function() {
    if (myDiv.style.display == "none") {
        myDiv.style.display = "block";
    }
    else {
        myDiv.style.display = "none";
    }
});
<div id="my-div">This is a div</div>

<p>The div above is hidden by default. Click the checkbox to toggle on and off</p>

<input id="check-box" type="checkbox" />

Upvotes: 2

Alexandre Demelas
Alexandre Demelas

Reputation: 4690

Create a class that represents "hide" state and toggle it when checkbox changes.

See how:

var checkbox = document.querySelector('input[name="check"]');
var div = document.querySelector('#container');

checkbox.addEventListener('change', function (e) {
   if (div.classList.contains('is-hide')) {
      div.classList.remove('is-hide');
   } else {
      div.classList.add('is-hide');
   }
});
.is-hide {
  display: none;
}
<input type="checkbox" name="check" />

<div id="container">Here goes the content.</div>

Upvotes: 2

Related Questions