Databases
StackOverflow2013
Postsdbo
POReplace multiple DIV's using Jquery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POReplace multiple DIV's using Jquery
    text
    copied!<p>I have a jquery script which replaces 1 div with another and replaces 1 link with another when it is selected:</p> <pre><code>$('.child2, a[href="#1"]').hide() $('#replacepagelinks a').click(function(){ $(this).hide().siblings().show() var w = this.hash.replace('#', ''); $('#parent div.child'+w).show().siblings().hide() }) </code></pre> <p>Here is my html:</p> <pre><code>&lt;div id="parent"&gt; &lt;div class="child1"&gt;Child 1 Contents&lt;/div&gt; &lt;div class="child2"&gt;Child 2 Contents&lt;/div&gt; &lt;/div&gt; &lt;div id="replacepagelinks"&gt; &lt;a href="#1"&gt;Replace Child 1 with Child 2&lt;/a&gt; &lt;a href="#2"&gt;Replace Child 2 with Child 1&lt;/a&gt; &lt;/div&gt; </code></pre> <p>Please check out this jsfiddle <a href="http://jsfiddle.net/KaqZ5/" rel="nofollow">http://jsfiddle.net/KaqZ5/</a> for a working example. </p> <p>This works great, however i need it to work with up to 5 divs like so:</p> <ol> <li><p>In child1 i would like only <code>&lt;a href="#1"&gt;Replace Child 1 with Child 2&lt;/a&gt;</code></p></li> <li><p>In child2 i would like <code>&lt;a href="#2"&gt;Replace Child 2 with Child 1&lt;/a&gt;</code> and <code>&lt;a href="#3"&gt;Replace Child 2 with Child 3&lt;/a&gt;</code></p></li> <li><p>In child3 i would like <code>&lt;a href="#3"&gt;Replace Child 3 with Child 2&lt;/a&gt;</code> and <code>&lt;a href="#4"&gt;Replace Child 3 with Child 4&lt;/a&gt;</code></p></li> <li><p>In child4 i would like <code>&lt;a href="#4"&gt;Replace Child 4 with Child 3&lt;/a&gt;</code> and <code>&lt;a href="#5"&gt;Replace Child 4 with Child 5&lt;/a&gt;.</code></p></li> <li><p>In child5 i would like only <code>&lt;a href="#5"&gt;Replace Child 5 with Child 4&lt;/a&gt;</code></p></li> </ol> <p>So each page has a 'next' and 'back' link except for the first page which only has a 'next' link and the last page which only has a 'back' link and i need this to support 2 child div's, 3 child div's and 4 child div's as well. </p> <p>My experience with jquery is almost nil so if somebody can please update my jsfiddle i would be very grateful.</p>
 

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