show div and hide existing div if open with jQuery?

Question

I have two divs which are hidden by default. The user then reveals the div on click. If a div is already open, and the user clicks to reveal the other div, I want the current div to hide, and show the new div.

My current code is this..

HTML

<div class="menu">MENU</div>
<div class="search">SEARCH</div>

<div class="menu-box">MENU BOX</div>
<div class="search-box">SEARCH BOX</div>

CSS

 .menu, .search {
      display:inline-block;
      cursor:pointer;
    }

    .menu, .search, .menu-box, .search-box  {
      padding:20px;
      background-color: #ccc;
      margin-right:10px;  
    }

    .menu-box, .search-box {
      width:20%;
      display:none;
    }

    .menu-box {
      background-color:red;
    }

    .search-box {
      background-color:green;
    }

JAVASCRIPT

$('.menu').click(function(){
    $('.menu-box').slideToggle();
});

$('.search').click(function(){
    $('.search-box').slideToggle();
});

You can see a working demo here...

http://codepen.io/seraphzz/pen/zbHDk

I have had a look around for help, but all the solutions are found are for tabs, where one div is always showing. This is not what I am after. A div should only be showing if that link was clicked on.

So to confirm, if the 'menu' div is already open, and the user clicks on 'search', I want the 'menu' div to hide and the 'search' to show. The two divs should never be showing at the same time!

Thanks in advance

adeneo · Accepted Answer · 2013-06-08 15:24:59Z

6

Using the same class makes this a lot easier ?

<div class="btn">MENU</div>
<div class="btn">SEARCH</div>


<div class="slide menu-box">MENU BOX</div>
<div class="slide search-box">SEARCH BOX</div>

js

$('.btn').on('click', function(){
    $('.slide').slideUp().eq($(this).index()).stop().slideToggle();
});

FIDDLE

answered Jun 8, 2013 at 15:24

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Adam Over a year ago

This is a good solution. Can you edit this code so the open div closes before the new one opens? Like I have done here.. codepen.io/seraphzz/pen/Ldsav

adeneo Over a year ago

@Adam - sure, something like this FIDDLE <-----

writeToBhuwan Over a year ago

if it's answered by @adeneo, it is undoubtedly the the best possible solution... :)

adeneo Over a year ago

@writeToBhuwan - thanks, thats nice of you to say. Not always the case though, but still nice!

Tom Studee · Accepted Answer · 2013-06-08 15:21:41Z

1

Change your search click handler to be:

$('.search').click(function(){
    $('.search-box').slideToggle();

    if($(".menu-box").is(":visible")) {
        $(this).slideToggle();
    }

});

and your menu handler to do the same, only check for search-box visibility.

edited Jun 8, 2013 at 15:21

answered Jun 8, 2013 at 15:15

Tom Studee

10.5k4 gold badges42 silver badges42 bronze badges

5 Comments

writeToBhuwan Over a year ago

$(this).slideToggle(); in place of $('.menu-box').slideToggle(); ? Just saying..

Tom Studee Over a year ago

@writeToBhuwan yea, probably better practice to use $(this) :)

Adam Over a year ago

Thanks I have taken this as a starting point, and then tweaked it so the transition is more graceful (open div slides up before next one opens). Here is a codepen... codepen.io/seraphzz/pen/Ldsav - Is there a cleaner way to write this?

Tom Studee Over a year ago

@Adam I would actually recommend the answer by adeneo below if you want a cleaner version.

Adam Over a year ago

Thanks for this solution, but I have gone with adeneo as he used less code.

Chris · Accepted Answer · 2013-10-02 13:30:47Z

0

<h3><a href="#1" class="toggler">Title of Section 1</a></h3>
<div id="1" class="element">Content goes here for the above h tag</div>

<h3><a href="#2" class="toggler">Title of Section 2</a></h3>
<div id="2" class="element">Content goes here for the above h tag</div>


$(".toggler").click(function(e) {
    e.preventDefault();
    var id = $(this).attr('href');

    $(".element").hide();
    $(id).show('slow');

});

answered Oct 2, 2013 at 13:30

Chris

1

Collectives™ on Stack Overflow

show div and hide existing div if open with jQuery?

3 Answers 3

4 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related