Databases
StackOverflow2013
Postsdbo
POjQuery Show and Hide multiple divs with a selected class
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Show and Hide multiple divs with a selected class
    text
    copied!<p>I need to be able to show and hide divs based on which href class is 'selected' I have some code below: </p> <p><a href="http://jsfiddle.net/XwN2L/722/">http://jsfiddle.net/XwN2L/722/</a></p> <p>I need to remove the 'all' option in the fiddle above.</p> <p>So basically when a href has the class of selected the two links for the href are shown, then when a user clicks on another href, it hides the previous links and shows the new links with the class 'selected'</p> <p>When they click on the link the selected class changes and the buttons hide and show accordingly? </p> <p>Nearly there just need help on the last bits.</p> <pre><code>&lt;div class="buttons"&gt; &lt;a id="showall"&gt;All&lt;/a&gt; &lt;a class="showSingle" target="1"&gt;Div 1&lt;/a&gt; &lt;a class="showSingle selected" target="2"&gt;Div 2&lt;/a&gt; &lt;a class="showSingle" target="3"&gt;Div 3&lt;/a&gt; &lt;a class="showSingle" target="4"&gt;Div 4&lt;/a&gt; &lt;/div&gt; &lt;div id="div1" class="targetDiv"&gt; &lt;a href="#" class="button3"&gt;1a&lt;/a&gt; &lt;a href="#" class="button3"&gt;1b&lt;/a&gt; &lt;/div&gt; &lt;div id="div2" class="targetDiv"&gt; &lt;a href="#" class="button3"&gt;2a&lt;/a&gt; &lt;a href="#" class="button3"&gt;2b&lt;/a&gt; &lt;/div&gt; &lt;div id="div3" class="targetDiv"&gt; &lt;a href="#" class="button3"&gt;3a&lt;/a&gt; &lt;a href="#" class="button3"&gt;3b&lt;/a&gt; &lt;/div&gt; &lt;div id="div4" class="targetDiv"&gt;popup COMPLETE&lt;/div&gt; &lt;script&gt; jQuery(function(){ jQuery('.showSingle').click(function(){ jQuery('.targetDiv').hide(); jQuery('#div'+$(this).attr('target')).show(); }); });​ &lt;script&gt; </code></pre> <p>Cheers</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