Databases
StackOverflow2013
Postsdbo
POHow to hide a toggled div and show another in its place
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to hide a toggled div and show another in its place
    text
    copied!<p>I'm attempting to put together a menu for a theme I'm working on however I'm having trouble getting part of it to work. Specifically, I want to be able to click on a link and have a div slide down and then fade in, then click another link and have that div fade and slide out then a new div slide and fade in its place. At the moment I have it working when hiding a div using the same link to show it, but different links just pile divs on top of each other.</p> <p>Here's the code I'm using:</p> <pre><code>jQuery.fn.fadeThenSlideToggle = function () { if (this.is(":hidden")) { return this.slideDown(500, "linear").fadeTo(500, 1, "linear"); } else { return this.fadeTo(500, 0, "linear").slideUp(500, "linear"); } }; $(document).ready(function () { $('#toggleabout').click(function () { $('#about').fadeThenSlideToggle(); return false; }); $('#toggleprojects').click(function () { $('#projects').fadeThenSlideToggle(); return false; }); $('#toggleconnect').click(function () { $('#connect').fadeThenSlideToggle(); return false; }); $('#toggleexchange').click(function () { $('#exchange').fadeThenSlideToggle(); return false; }); $('#toggleextras').click(function () { $('#extras').fadeThenSlideToggle(); return false; }); $('#togglesearch').click(function () { $('#search').fadeThenSlideToggle(); return false; }); }); </code></pre> <p>With a previous menu I designed I used something like this:</p> <pre><code>$('#toggleconnect').click(function () { $(".menubox:not(#connect)").slideUp(500, "linear"); $('#connect').delay(600).slideToggle(500, "linear"); return false; }); </code></pre> <p>This works fine when only calling on a single effect however the complexity of what I want to do here seems to break this. I've tried a few things but nothing seems to work for me. Any help would be appreciated.</p> <h2><a href="http://codepen.io/brigand/pen/GrgCk" rel="nofollow">CodePen</a></h2>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload