jQuery - how to run one event while delaying another?

Question

I'm a bit of a jQuery newbie, so forgive me if this seems a bit simple! I am setting up a sliding header system, which works very much like an accordion menu, however the links to open and close the elements are in a different part of the HTML, so all the accordion tutorials I found didn't work.

I have got this so far: HTML:

<div class="drawer" id="drawer_about"></div>
<div class="drawer" id="drawer_contact"></div>
<div class="drawer" id="drawer_hire"></div>
<div class="drawer" id="drawer_social"></div>

...

<ul class="navigation">
<li><a href="#" class="show_hide_about"><span>About Me</span></a></li>
<li><a href="#" class="show_hide_contact"><span>Get In Touch</span></a></li>
<li><a href="#" class="show_hide_hire"><span>Hire Me</span></a></li>
<li><a href="#" class="show_hide_social"><span>Social Networks</span></a></li>
</ul>

And jQuery:

$(document).ready(function(){
        $("#drawer_about").hide();
        $("#drawer_contact").hide();
        $("#drawer_hire").hide();
        $("#drawer_social").hide();

        lastBlock = ("#drawer_hire");


    $('.show_hide_about').click(function(){
        $("#drawer_about").slideToggle(700);
        $(lastBlock).hide(700);
        lastBlock = ("#drawer_about");
    });

    $('.show_hide_contact').click(function(){
        $("#drawer_contact").slideToggle(700);
        $(lastBlock).hide(700);
        lastBlock = ("#drawer_contact");
    });

    $('.show_hide_hire').click(function(){
        $("#drawer_hire").slideToggle(700);
        $(lastBlock).hide(700);
        lastBlock = ("#drawer_hire");
    });

    $('.show_hide_social').click(function(){
        $("#drawer_social").slideToggle(700);
        $(lastBlock).hide(700);
        lastBlock = ("#drawer_social");
    });
});

Am I going OTT here? is there a simpler way to do this?

The main problem I'm having is it all works, however if the ABOUT ME panel is open and the user clicks the HIRE ME link, I get a weird effect. What I'd want in this situation is for the ABOUT ME panel to fold up, then the HIRE ME panel to fold down.

Hope that makes sense, thanks folks,

Alex

Answer 1

I'd set up the links like this: <a href="" class="show" data-section="contact">asdf</a>

Then you all you need is:

$('.show').click(function(ev) {
    var $visibleDrawer = $('.drawer:visible').eq(0); // make sure to get only one (or 0) drawer

    // set currentSection to the drawer's id or empty if no drawer was found
    var currentSection = $visibleDrawer.length?$visibleDrawer.attr('id').replace('drawer_',''):'';

    $('.drawer').slideUp(700);
    $('a.show').removeClass('active'); // reset all link classes


    (function(clickedSection, $link){ //<-- pass the active link to have access to it inside the closure
        if(currentSection != clickedSection){
            $link.addClass('active');        // set active class on clicked link
            setTimeout(function() {
                $('#drawer_'+clickedSection).slideDown(700);
            }, ($visibleDrawer.length?700:0)); // set the timeout to 0 if no drawer visible
        }
    })($(this).data('section'),$(this)); //<--

    ev.preventDefault();
});

Answer 2

Here is a link to how it works on jsFiddle (Note that you should choose framework to be jQuery)

I think this would work with you :

    $(document).ready(
        function(){
            $('.header').click(function(){
                //To hide all other contents
                $('.content').slideUp('slow');
                var num=$(this).attr('id').split('_')[1];
                //And show this one .. 
                $('#content_'+num).slideDown('slow');
            });

        }
    );

HTML should look like this :

                    <div class="header" id="title_111"><a href="#">Category 1</a></div>
                    <div class="content" id="content_111">

                    </div>

                    <div class="header" id="title_112"><a href="#">Category 2</a></div>
                    <div class="content" id="content_112">

                    </div>

                    <div class="header" id="title_113"><a href="#">Category 3</a></div>
                    <div class="content" id="content_113">

                    </div>

                    <div class="header" id="title_114"><a href="#">Category 4</a></div>
                    <div class="content" id="content_114">

                    </div>

                    <div class="header" id="title_115"><a href="#">Category 5</a></div>
                    <div class="content" id="content_115">

                    </div>

                    <div class="header" id="title_116"><a href="#">Category 6</a></div>
                    <div class="content" id="content_116">

                    </div>

Answer 3

using .animate() you can parse a callback function which will be executed at the end of the animation, or you can use .queue() to keep track of the point of execution against and element. Some pseudo code of the first way

$('#foo').animate(function() {
    // do stuff with foo
}, duration, easing, function() {
    $('#bar').animate(function() {
         // do stuff with bar
    })
});