Search code examples
javascriptjquerytoggle

How to implement a blinds toggle effect with jQuery

I'm trying to write a "blinds" function that would close a DIV in a display:none mode. The unseen DIV is inside a wider DIV, containing the blind trigger.

This:

$(document).ready(function () {
    $("#toggle_blind").click(function () {
        $(this).toggle("fast");
    });
});

Well, this blinds the button. How can I add a DIV to $this? Something like:

<div id="blind" class="wider_div">
   <h3 id="closeButton">Close</h3>
   <div style="display:none;" id="closeThis">
       <p>some text</p>
   </div>
</div>

How do I make the Close Button on H3 to close/open the CloseButton DIV on each click?

Solution

  • The div is the next sibling of the h3 so you can use .next()

    E.g

    $('#closeButton').click( function(){
  $(this).next().toggle();
});