Only allowing one transition effect at a time

Question

I have three divs that I'm wanting to keep hidden until a link is clicked, however if any link is clicked I want the other two to hide again. I've modified http://plnkr.co/edit/Wpcgjs3FS4ryrhQUAOcU?p=preview to work for me:

<script>
    $("li#menu-item-64").click(function () {
        if ($("#advertise-wrapper").hasClass("height-transition-hidden"))
            $("#advertise-wrapper").slideDownTransition();
        else
            $("#advertise-wrapper").slideUpTransition();
    });

$("li#menu-item-65").click(function () {
        if ($("#about-wrapper").hasClass("height-transition-hidden"))
            $("#about-wrapper").slideDownTransition();
        else
            $("#about-wrapper").slideUpTransition();
    });

$("li#menu-item-66").click(function () {
        if ($("#contact-wrapper").hasClass("height-transition-hidden"))
            $("#contact-wrapper").slideDownTransition();
        else
            $("#contact-wrapper").slideUpTransition();
    });
</script>

Is there anyway I could make only one of these shown at a time?

Answer 1

I went ahead and made a snippet of it in action!

So, what's happening here is because we know we only want one to show as expanded at a time, I'm simply collapsing all of the wrappers at once before expanding the one I want.

Also, you're using the slideTransition() method to do your animations, which works, but I'm toggling classes here so that I can get smooth animations that will also reverse themselves mid transition automatically when another is activated. jQuery animations tend to need to be explicitly told to stop if they're in the middle of animating.

Let me know if you have any questions about what we've got here!

 $("#button-one").click(function() { $(".area").removeClass("is-expanded"); $("#area-one").addClass("is-expanded"); }); $("#button-two").click(function() { $(".area").removeClass("is-expanded"); $("#area-two").addClass("is-expanded"); }); $("#button-three").click(function() { $(".area").removeClass("is-expanded"); $("#area-three").addClass("is-expanded"); }); 

 .area { width: 80px; height: 0; display: inline-block; vertical-align: top; overflow: hidden; transition: all .5s ease-in-out; } .area.is-expanded { height: 50px; } #area-one { background-color: #1abc9c; } #area-two { background-color: #3498db; } #area-three { background-color: #9b59b6; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="button-one">Button 1</button> <button id="button-two">Button 2</button> <button id="button-three">Button 3</button> <br><br> <div id="area-one" class="area">Area One</div> <div id="area-two" class="area">Area Two</div> <div id="area-three" class="area">Area Three</div> 

Or, if you wanted to get crazy and really lighten your javascript AND make it more scalable, you could do something where the javascript takes cues from the HTML itself to dynamically trigger its targets. The following example uses data attributes in the HTML as sort of options for which elements to trigger. That way, you aren't adding another javascript function every time you have another area to worry about.

 $(".button").click(function() { var areaID = $(this).data("area-id"); $(".area").removeClass("is-expanded"); $("#area-" + areaID).addClass("is-expanded"); }); 

 .area { width: 80px; height: 0; display: inline-block; vertical-align: top; overflow: hidden; transition: all .5s ease-in-out; } .area.is-expanded { height: 50px; } #area-one { background-color: #1abc9c; } #area-two { background-color: #3498db; } #area-three { background-color: #9b59b6; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="button-one" class="button" data-area-id="one">Button 1</button> <button id="button-two" class="button" data-area-id="two">Button 2</button> <button id="button-three" class="button" data-area-id="three">Button 3</button> <br><br> <div id="area-one" class="area">Area One</div> <div id="area-two" class="area">Area Two</div> <div id="area-three" class="area">Area Three</div>