Accordian effect

Effect like accordian using slideUp and slideDown function

by ajinkya_parakh

HTML

<div id="Introduction">You can click on Section 1, Section 2 or you can check/unchek given checkboxes. </div>  
<div id="header0">What is Stack Overflow ?</div>
<div id="section0">
    <b>(This section will always reamain open)</b><br/>
Stack Overflow is for professional and enthusiast programmers, people who write code because they love it. We feel the best Stack Overflow questions have a bit of source code in them, but if your question generally covers … <br />
<input type="checkbox" name="section" class="section1" /> View Section 1<br />
<input type="checkbox" name="section" class="section2" /> View Section 2
   </div>
  <div id="header1" class="toggle">Section 1 : Create an account </div>

  <div id="section1">You can answer and suggest edits as an anonymous user, much like Wikipedia. There are some things you won’t be able to do on the site without registering, such as vote or ask new questions. But it’s easy to register. <br/>
  First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
  </div>
  
<div id="header2" class="toggle">Section 2 : Etiquette </div>
  <div id="section2">Civility is required at all times; rudeness will not be tolerated. <br />
  <input type="radio" name="consent" value="agree" /> Agree<br />
<input type="radio" name="consent" value="disagree" /> Disagree
  </div>

CSS

.toggle {
    
    background-color: #BED4EB;
    color: #212224;
    font-family: Arial,sans-serif;
    font-weight: normal;
    margin: 30px 0 10px;
    padding: 5px 0 5px 10px;
    text-shadow: 0 1px 0 white;
}

#header0 {
 background-color: #BED4EB;
    color: #212224;
    font-family: Arial,sans-serif;
    font-weight: normal;
    margin: 30px 0 10px;
    padding: 5px 0 5px 10px;
    text-shadow: 0 1px 0 white;
}

JavaScript

$(document).ready(function() {

    // Disable all input elements within div 
    $('.toggle').next('div').find('input').attr("disabled", true);

    // Hide all div with class="toggle"
    $('.toggle').next('div').hide();

    // Attach toggel effect on click to div
    $('.toggle').click(function() {
        $(this).next('div').slideToggle('fast');
    });

    // Even fired whenever checkbox is checked/unchecked
    $('input:checkbox').click(function() {
        // I have kept div id in class attribute of checkbox
        var section_id = $(this).attr("class");

        if ($(this).attr('checked')) {
            // When checkbox is checked
            // enable all input elements
            $("#" + section_id + " input").attr("disabled", false);
            // Expand div
            $("#" + section_id).slideDown('fast');
            //$("#" + section_id).prev().unbind('click');
        } else {
            // Disable inputs within div
            $("#" + section_id + " input").attr("disabled", true);
            // Collapse div
            $("#" + section_id).slideUp('fast');
        }
    });
});