Geek Answers Handbook

Multiple show hide switch with expanding div

I am new to coding and I need help with jQuery. I have 2 <div> (one with an image, the other with a menu list, 50% width), and I need to be able to click one of the menu options to create a new div (50% width) from while reducing the width of the two sections up to 25%. Then click on the same menu option to hide the new div and return to the original width. But if I click on another menu item while the new div is visible, I need it to change the contents to this particular menu option.

How can I swap the left <div> with jQuery?

Here is the HTML I'm working with:

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <!-- SCRIPT FILES --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="script.js"></script> <!-- CSS STYLESHEETS --> <link rel="stylesheet" href="reset.css" type="text/css" /> <link rel="stylesheet" href="main.css" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"> </div><!--header--> <div id="container"> <div class="box-container"> <div class="box1"> <img src="images/Untitled-1.png" alt="logo"> </div> <div class="box2"> <div id="nav"> <ul> <li><a>hello!</a></li> <li><a>ADVERTISING</a></li> <li><a>DESIGN</a></li> <li><a>ABOUT</a></li> <li><a>BLOG</a></li> <li><a>SHOP</a></li> </ul> </div><!--nav--> </div><!--box2--> <div class="box3"> <div id="ADVERTISING" class="content">ADVERTISING</div> <div id="DESIGN" class="content">DESIGN</div> <div id="ABOUT" class="content">ABOUT</div> <div id="BLOG" class="content">BLOG</div> <div id="SHOP" class="content">SHOP</div> </div> </div><!--box-container--> </div><!--container--> <div id="footer"> </div><!--footer--> </div><!-- wrapper--> </body> </html>​

This is where jsFiddle works with styles: http://jsfiddle.net/YcphY/6/

+4
source share
2 answers

To get started, here is a method that links the examples below to how to do this in the animation you are after :

 $(function() { $("#nav").delegate("li","click", function() { var newDiv = $(".box3 .content").eq($(this).index()-1); newDiv.siblings().hide().end(); // hide the others if(newDiv.is(":visible")) { // if shown, fade it out, when the fade finishes, slide everything back newDiv.fadeOut(function() { $(".box3").hide(); $(".box1, .box2").animate({ width: "50%" }); }); } else { // if not shown, then slide over space, then fade in $(".box1, .box2").animate({ width: "25%" }, function() { $(".box3").show(); newDiv.fadeIn("fast"); }); } }); });​

Given your current CSS, you can do this:

 $(function() { $("#nav").delegate("li a","click", function() { $(".box3").show(); $("#" + $(this).text()).show().siblings().hide(); }); });​

Here's a working example , although you can see CSS, it takes a bit of work to get 100%. I suggest a few changes: provide your links and containers matching identifiers, for example:

 <li><a id="ad">ADVERTISING</a></li> <div id="ad-container" class="content">ADVERTISING</div>

Then JS could be:

 $(function() { $("#nav").delegate("li a","click", function() { $(".box3").show(); $("#" + this.id + "-container").show().siblings().hide(); }); });

Here is a working example of this ... it allows you to change the text as you like and not worry about breaking JS later. Another alternative is to disable the link index in the list using .index() <li> if the number of links was consistent with the <div> in all cases, even if there is an offset due to "hello!". link.

Here is an example index approach with your current HTML:

 $(function() { $("#nav").delegate("li","click", function() { $(".box3").show(); $(".box3 .content").hide().eq($(this).index()-1).show(); }); });​
+1
source

I think the jQuery animate function might come in handy.

What you need to do is either have a hidden div located from the window added to your HTML (or maybe add it dynamically using jquery in the document.ready event, if you prefer) and use the above animate function to insert it and turn off and bind to the click function of a menu item.

Code example

 $(document).ready(function(){ $('#slide').click(function(){ var hidden = $('.hidden'); if (hidden.hasClass('visible')){ hidden.animate({"left":"-1000px"}, "slow"); hidden.removeClass('visible'); } else { hidden.animate({"left":"0px"}, "slow"); hidden.addClass('visible'); } }); });​

Explanation

In the above code, we bind the code to the click event of the element with id "slide". As soon as the element is clicked, the code is launched. We check if there is a .hidden css class called "visible". If we do not animate a hidden div to insert it, and if it has a visible class, then bring it in.

Working script

Here you have a JSFiddle

Some pointers

  • In a hidden CSS div, remember to specify a z-index greater than the current left pane.
  • In the hidden CSS div, remember to set the position in absolute and left about -1200px (or more than window.width () so that it works on all screen sizes.)
+1
source

More articles:


All Articles