在div之间切换时删除活动状态

Question

I have created multiple top down menu items. When the links are clicked a div slides down to show some content.

What I am trying to do with these links is toggle between them. When one div is opened an active state is added to the link, when it is closed the active state is removed and the div hidden. When you click between the links I have managed to get them to toggle between each other and the active state is added to the div that is opened.

What I cannot achieve is removing the active state and resetting some css.

Here is my Javascript:

//menu toggle
$(".trigger").click(function() {

   var divToToggle = $( $(this).data('target') );
   $(".toggle:visible").not(divToToggle).hide();
   $(".trigger").not(divToToggle).removeClass('active');
   $('.top-nav').css('margin-top', '20px');

   divToToggle.slideToggle("fast", "linear");

   $(this).toggleClass('active');
   $('.top-nav').css('margin-top', '0px');

   return false;

});

The .toggle class is on all the divs that are toggled:

    <div class="account-container toggle hide"></div>
    <div class="collections-container toggle hide"></div>
    <div class="search-container toggle hide"></div>

The .trigger class is on all my links:

    <ul class="top-nav">
        <li><a class="hidden-tablet" href="">home </a></li>
        <li><a class="hidden-tablet" href="">about us </a></li>
        <li><a class="hidden-tablet" href="">where to buy </a></li>
        <li><a class="hidden-tablet" href="">contact us </a></li>
        <li class="tablet-menu visible-tablet"><a class="tablet-menu trigger" href="" data-target=".tablet-menu-container">tablet menu</a></li>
        <li class="account"><a class="account trigger" href="" data-target=".account-container">account</a></li>
        <li class="collection"><a class="collection trigger" href="" data-target=".collections-container">collections</a></li>
        <li class="search"><a class="search trigger" href="" data-target=".search-container">search</a></li>
        <li class="basket"><a class="basket trigger" href="" data-target=".home-basket-container">basket</a></li>
            </ul>

Answer 1

It's hard to say where exactly your code is going wrong, but I've re-written it so it works slightly differently. Your click handler has to handle two possibilities: either we're clicking to hide an existing section, or we're clicking to switch to a new section. But we can also think of this as being two steps, with the second one optional: either we hide an existing section, or we hide an existing section and show a new one.

I've also switched to using ev.preventDefault() to stop the link from firing, named the jQuery variables so they start with $ (which makes them easier to differentiate). You can try it out on jsfiddle here .

$(document).ready(function () {
    $(".trigger").click(function (ev) {
        ev.preventDefault();
        var $clickedLink = $(this);
        var $divToToggle = $($(this).data('target'));
        var isHideOnly = $clickedLink.hasClass('active');

        // Hide the existing div and remove 'active' class.
        $(".toggle:visible").hide();
        $(".trigger").removeClass('active');
        $('.top-nav').css('margin-top', '20px');

        // If we're showing a new one, reveal it and set the active class on the link.
        if (!isHideOnly) { 
            $divToToggle.slideToggle("fast", "linear");
            $('.top-nav').css('margin-top', '0');
            $clickedLink.addClass('active');
        }
    });
});