Expand and Collapse Sections with Buttons

Expandable and collapsible sections with plus and minus buttons, as well as Expand All and Collapse All buttons

by Tom Johnson

HTML

<button id="expandall">Expand All</button>
<button id="collapseall">Collapse All</button>

<h2>First section</h2>

<div class="section">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dolor magna, elementum sit amet adipiscing vitae, varius vitae erat. Phasellus sodales, arcu sit amet facilisis condimentum, magna mi fermentum augue, eget feugiat elit nulla euismod ligula. In mollis viverra magna sed placerat.</div>

<h2>Second section</h2>

<div class="section">this is another answe. Pellentesque varius, urna id laoreet luctus, est ante molestie ante, fringilla congue tortor orci non arcu. Nullam quis imperdiet justo. Pellentesque sit amet justo ipsum, vitae feugiat elit. Suspendisse tincidunt metus nec ante molestie mattis. Curabitur diam velit, posuere bibendum iaculis ac, egestas at lacus. Aenean hendrerit ullamcorper lorem sit amet euismod. In a metus lectus, non elementum neque.</div>
 <h2>Third section</h2>

<div class="section">this is another answe. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dolor magna, elementum sit amet adipiscing vitae, varius vitae erat. Phasellus sodales, arcu sit amet facilisis condimentum, magna mi fermentum augue, eget feugiat elit nulla euismod ligula. In mollis viverra magna sed placerat. Pellentesque varius, urna id laoreet luctus, est ante molestie ante, fringilla congue tortor orci non arcu. Nullam quis imperdiet justo. Pellentesque sit amet justo ipsum, vitae feugiat elit. Suspendisse tincidunt metus nec ante molestie mattis. Curabitur diam velit, posuere bibendum iaculis ac, egestas at lacus. Aenean hendrerit ullamcorper lorem sit amet euismod. In a metus lectus, non elementum neque.</div>

CSS

h2 {
    cursor: pointer;
    color: #696;
    font-weight:bold;
    background-image:url('http://idratherbewriting.com/wp-content/uploads/2013/03/plus3.jpg');
    background-repeat:no-repeat;
    text-indent:23px;
    background-position:4px 8px;
}
.open {
    background-image:url('http://idratherbewriting.com/wp-content/uploads/2013/03/minusb.jpg');
}

JavaScript

//preload the plus and minus images so they appear immediately
//when called
if (document.images) {
    img1 = new Image();
    img1.src = "http://idratherbewriting.com/wp-content/uploads/2013/03/plus3.jpg";
    img2 = new Image();
    img2.src = "http://idratherbewriting.com/wp-content/uploads/2013/03/minusb.jpg";
}

//when the page has loaded, run this function
$(document).ready(function () {
 //hide all sections tagged with the class "section" by default
    $('.section').hide();
    //when an h2 element is clicked
    $('h2').click(function () {
        //add the class "open" (which changes the bg image to minus)
        $(this).toggleClass("open");
        //proceed to the next style and and make the hidden element 
        //visible; or if it's shown, make it hidden
        $(this).next().toggle();
    }); //end toggle

    //when the Expand All button is clicked
    $('#expandall').click(function () {
        //Show all elements marked with the "section" class
        $('.section').show();
        //and add the class "open" to the h2 element
        $('h2').addClass("open");
    });

    //when the collapseall section is clicked
    $('#collapseall').click(function () {
        //hide all elements tagged with the "section" class
        $('.section').hide();
        //and remove the "open" class from the h2 element (this 
        //removes the minus sign graphic)
        $('h2').removeClass("open");
    });

}); //end ready