Question

When the page loads, there are elements that I want showing the content and others hiding the content. When the user clicks the header, the element will toggle between hiding and showing depending on what their current state is. The script that I have written works, but it has a quark and I feel it needs to have an if/else to determine the state of the .content to determine the click. Currently it requires the user to click twice on the hidden element to display .content.

 $('#services .content').hide();
 $('.header').toggle(function() {
    $(this)
       .addClass('active')
       .next('.content').slideUp();
    }, function() {
       $(this)
       .removeClass('active')
       .next('.content').slideDown();
 });

Here is a link to the jsfiddle

Any Help is much appreciated. Thank you.

Answer 1

If you swap your functions in the toggle function around, it should give you the effect you want –

$(function(){
    $('#services .content').hide();
    $('.header').click(function() {
        if ($(this).next().is(':visible')) $(this).addClass('active').next('.content').slideUp();
        else $(this).removeClass('active').next('.content').slideDown();
    });
})   

Updated fiddle – http://jsfiddle.net/daCkp/1/