在这种情况下如何用jQuery实现切换效果？

Question

Found one example that is exactly what I would like to have. Please resize your window to 700px less and url is http://www.subway.com.au

thanks for reading this.

My layout is as the following:

<div id="left">
  <div id="left-container" style="display:none;">Content foo
  </div>
</div>

<div id="right">
  <div id="right-container" style="display:none;">Content bar
  </div>
</div>

<div class="overlay"></div>

Basically, when click either #left or #right, relatively the #left-container or #right-container will slideUp or slideDown, and at the same time .overlay will be showed or hidden. Of course, when containers are slideUp, clicking all screen rather than itself will slideDown and removeClass .overlay.

I know this question has been brought over a lot of times. However it seems still not working for me. Thanks for your time.

Answer 1

I would use a little different HTML for that -

<div id="left" class="header">
    A
  <div class="container">Content foo
  </div>
</div>

<div id="right" class="header">
    B
  <div class="container">Content bar
  </div>
</div>

<div class="overlay"></div>

and with the JS -

$(function(){
    $(".header").on("click", function(){
        if($(this).find(".container").is(":visible")){
            $(".header").find(".container").each(function(){
                 $(this).slideDown();
            });
            $(this).find(".container").slideUp();
            $(".overlay").show();
        }else{            
            $(this).find(".container").slideDown();
            $(".overlay").hide();
        }
    });
});

Here is the fiddle - http://jsfiddle.net/n8ykqLuy/1/

NOTE: At first I thought your requirement was custom. But I think what you are looking for is an accordion.