Question

Im trying to make an accordion with toggle which seems to work pretty good now. What i would like to get some help with as a newbie to javascript is the way it is put together.

http://jsfiddle.net/z3wW4/

This isnt pretty i know…

    $(document).ready(function() {
     $('#contact').click(function() {
        $('#content2, #content3').hide(200, 'linear');
          $('#content').toggle(700, 'linear');          
    });
});

$(document).ready(function() {
     $('#services').click(function() {
        $('#content, #content3').hide(200, 'linear');
          $('#content2').toggle(700, 'linear');
    });
});

$(document).ready(function() {
     $('#about').click(function() {
        $('#content, #content2').hide(200, 'linear');
          $('#content3').toggle(700, 'linear');
    });
});

Answer 1

I’d suggest:

 $('#menu > a').click(function() { // specifies which a elements
     var that = $(this), // caching the selectors for performance
         divs = $(this).siblings('div'),
         div = $(this).nextAll('div:first');
     divs.not(div).hide(200, 'linear'); // hides all the sibling divs *except* for the
                                        // immediately following div element
     div.toggle(700, 'linear');         // toggles the immediately-following div
});

​
JS Fiddle demo.

References:

• click().
• nextAll().
• not().
• siblings().
• toggle().