CODEWITHSUNDEEP
jqueryhtml
Phorce
Phorce

Reputation: 4642

Stop Toggle when clicking on the link

I'm trying to implement a particular piece on a website that toggles down when I click on a link, if a toggle is already on the page then it will close this and open this selected one.

Please refer to here: http://jsfiddle.net/r79Nu/3/

The problem is I want it so when you click on a particular link, it will stop toggling down all together and remove it. At the moment, it will display a div whenever you click on the link for a second time.

Here is the code:

    $('#nav a').click(function () {
    var headerItem = $(this).attr('data-header');
    if ($('#header_container').is(':visible')) {
        $('#header_container').slideUp(500, function() {
            $('.header_item').hide();
            $('#'+headerItem).show();
            $('#header_container').slideToggle(500);
        });
    }
    else {
        $('#'+headerItem).show();
        $('#header_container').slideToggle(500);
    }

});

Hope this makes sense.

Upvotes: 0

Views: 351

Answers (2)

Walls
Walls

Reputation: 4010

I'll take a shot at what I think you want. Again it is VERY unclear what the desired functionality is. This will work with the first click expanding the correct text (header 1 or 2), and then on the second click to that initial click spot, it retracts the cover. This hides that shown data, so when you click 1 you get 1's data, and vice verse with 2. Is this the correct functionality?

http://jsfiddle.net/r79Nu/23/

Upvotes: 1

allenhwkim
allenhwkim

Reputation: 27738

Add this code, so that it does not toggle if already selected.

$('#nav a').click(function () {
    var headerItem = $(this).attr('data-header');
    if ($('#header_container #'+headerItem).is(':visible')) {
        $('#header_container').slideUp(500);  // or whatever method to make it disappear
        return false;
    } 
    .... rest of your code ...
}

Upvotes: 1

Related Questions