Toggleable Boxes

[Brian]

Place this code anywhere that accepts HTML.

<script type="text/javascript">
// Toggleable Boxes
$(document).ready(function(){
    $('.toggle-box').hide();
    $('.toggle-name').click(function(){
        var x = $(this).attr('class').split('box')[1];
        $('.toggle-box.box'+x).toggle();
    });
});
</script>


<div class="toggle-name clickable box1">
Name or image to click on goes here
</div>

<div class="toggle-name clickable box2">
Name or image to click on goes here
</div>

<div class="toggle-name clickable box3">
Name or image to click on goes here
</div>


<div class="toggle-box box1">
Content goes here
</div>

<div class="toggle-box box2">
Content goes here
</div>

<div class="toggle-box box3">
Content goes here
</div>

[Brian]

Any time you want to add a new box to this list, just add the following HTML to the appropriate areas, increasing the number in every green area. For example, since the last number in the above code was 3, we'll make every number in this one 4.

<div class="toggle-name clickable box4"">
Name or image to click on goes here
</div>

<div class="toggle-box box4">
Content goes here
</div>

You can do this as many times as you want and move the name divs and the box divs around however you prefer, as well as change what types of elements they are.