Databases
StackOverflow2013
Postsdbo
POHow to show / hide all tags with the same class with Java Script?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to show / hide all tags with the same class with Java Script?
    text
    copied!<p>I need a javascrit function that shows/hides all span tags with a specific class (t1, t2 or t3) in a HTML document. Example:</p> <pre><code>&lt;script type="text/javascript"&gt; &lt;!-- function sh(t){//show_hide(text number class) //??? } //--&gt; &lt;/script&gt; &lt;div id='C'&gt; &lt;p&gt; &lt;span class="P"&gt; Normal allways visible text. &lt;span class="t1"&gt;Text 1&lt;/span&gt; &lt;span class="t2"&gt;Text 2&lt;/span&gt; &lt;span class="t3"&gt;Text 3&lt;/span&gt; Normal allways visible text. &lt;/span&gt; &lt;/p&gt; &lt;p&gt; &lt;span class="P"&gt; Normal allways visible text. &lt;span class="t1"&gt;Text 1&lt;/span&gt; &lt;span class="t2"&gt;Text 2&lt;/span&gt; &lt;span class="t3"&gt;Text 3&lt;/span&gt; Normal (allways visible text. &lt;/span&gt; &lt;/p&gt; &lt;p&gt;&lt;span&gt;Normal allways visible text.&lt;/span&gt;&lt;/p&gt; &lt;/div&gt; </code></pre> <p>The function sh (show hide) could be trigerred like this:</p> <pre><code>&lt;p&gt;Show: &lt;a href="#" onclick="sh('t1');"&gt;text 1&lt;/a&gt; | &lt;a href="#" onclick="sh(t2);"&gt;text 2&lt;/a&gt; | &lt;a href="#" onclick="sh(t3);"&gt;text 3&lt;/a&gt;&lt;/p&gt; </code></pre> <p><strong>An important detail is that when the span class t1 is visible, all other span class t2 and t3 are hidden. The default is to have all span class t1 visible at the first load.</strong></p> <p>Thanks a lot.</p> <hr> <p>The folks have already got what I needed. There are two solutions:</p> <p>Pure Javascript: <a href="http://jsfiddle.net/4DREQ/" rel="nofollow">http://jsfiddle.net/4DREQ/</a></p> <p>With the help of JQuery: <a href="http://jsfiddle.net/v3vWM/3/" rel="nofollow">http://jsfiddle.net/v3vWM/3/</a></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