javascripthtmltwitter-bootstrap

Bootstrap Show and Hide a id with a checkbox


I have a div that I want to show if the user make click in a checkbox (yes) and hide if make click in other checkbox (no)

How can I use javascript, jquery or css code to show and hide the div with id "test" depending on the selection of the user in the checkboxes? (yes or no)

<div class="row" id="test">
        //div that I want to show/hide
</div>


//I have this two checkboxes yes__ no__ 
Yes
<input type="checkbox" name="m_name_no" value="no" id="m_id_no" class="check"/> No </input> 
    </div>

Solution

  • You can use the checked for this and do something like so

    input[type=checkbox]:checked + div {diplay: block;}
    

    here is an exmple I made for you :

    LIVE DEMO

    HTML :

    <div style="clear:both;">
    <input type="checkbox" id="test1ck"> <div class="lool" >Check and Uncheck Me</label><br>
    <input type="checkbox" id="test2ck"> <div class="lool" >Check and uncheck me too!</div></div>
    

    CSS :

    .lool {
      display: none;
    }
    
    
    input[type=checkbox]:checked ~ div.lool {
      display:block;
      color: red;
    }
    

    of course make sure your are not trying to select a parent element, there is no way to select a parent with CSS only