Back to LittleRaft

1. Functionality with no styling

Section 1 - Click on this or any other section title to expand the section.

jQuery UI has a beautiful expanding section control, but building your own is very simple, and leaves full control in your hands for all the styling and content handling, without loading any additional libraries.

This example only has one section open at a time, but you can allow all opened sections to stay open by removing the "slideUp()" line from the javascript.

Open other sections to see the components.

Section 2

Code for opening and closing:
$(document).ready(function () {
    $('.expandotitle').click(function () {
        $('.expandodiv').not($(this).children('.expandodiv')).slideUp();
        $(this).children('.expandodiv').slideToggle();
    });
});

Section 3

css:
.expandotitle { cursor: pointer; }
.expandodiv { display: none; }

Section 4

Sample sections:
<div class="expandotitle">Section n
    <div class="expandodiv">Hello World</div>
</div>

2. With just a little bit of styling

Section 1

This version is wrapped in <div class="styled"></div>.

Section 2

Code for opening and closing:
$(document).ready(function () {
    $('.expandotitle').click(function () {
        $('.expandodiv').not($(this).children('.expandodiv')).slideUp();
        $(this).children('.expandodiv').slideToggle();
    });
});

Section 3

css:
.expandotitle { cursor: pointer; }
.expandodiv { display: none; }

Section 4

Sample sections:
<div class="expandotitle">Section n
    <div class="expandodiv">Hello World</div>
</div>