Databases
StackOverflow2013
Postsdbo
POShow/hide multiple classes with javascript
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POShow/hide multiple classes with javascript
    text
    copied!<blockquote> <p><strong>Possible Duplicate:</strong><br> <a href="https://stackoverflow.com/questions/6787383/what-is-the-solution-to-remove-add-a-class-in-pure-javascript">what is the solution to remove/add a class in pure javascript?</a> </p> </blockquote> <p>Firstly forgive what seems to be a simple javascript question, I have just started getting to grasps with the language. I have seen numerous posts on showing and hiding content by either classes or ids, but they all seem to apply to one at a time. I would like to change three classes at a time and what display change is depends on what links the user has all ready clicked on. Confusing explanation I know but my example with code is below.</p> <p>I am building an image gallery with a series of thumbnails that all have classes assigned to them; <code>.photo</code>, <code>.print</code> and <code>.logo</code>. The desire is to have four 'buttons'; photo, print, logo and display all. When the user clicks "photo" the code will set .photo to <code>display:block</code>, and <code>.print</code> and .logo to <code>display:none</code>. When the user clicks "print" the code will set .print to <code>display:block</code>, and .photo and .logo to <code>display:none</code>. When the user clicks "logo" the code will set .logo to <code>display:block</code>, and .photo and .print to <code>display:none</code>. And obviously when the user clicks "display all" all classes are set to <code>display:block</code>.</p> <pre><code>&lt;div id="menu"&gt; &lt;ul class"toplevel"&gt; &lt;li id="photoselect"&gt;&lt;a href="photo.html"&gt;Photography&lt;/a&gt;&lt;/li&gt; &lt;li id="logoselect"&gt;&lt;a href="logo.html"&gt;Print&lt;/a&gt;&lt;/li&gt; &lt;li id="printselect"&gt;&lt;a href="print.html"&gt;Logo&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="content"&gt; &lt;a href="photo/photo01.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"&gt;&lt;img class="thumb photo" src="photo/photo01.jpg"&gt;&lt;/a&gt; &lt;a href="photo/photo02.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"&gt;&lt;img class="thumb photo" src="photo/photo02.jpg"&gt;&lt;/a&gt; &lt;a href="photo/photo03.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"&gt;&lt;img class="thumb print" src="photo/photo03.jpg"&gt;&lt;/a&gt; &lt;a href="photo/photo04.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"&gt;&lt;img class="thumb print" src="photo/photo04.jpg"&gt;&lt;/a&gt; &lt;a href="photo/photo05.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"&gt;&lt;img class="thumb logo" src="photo/photo05.jpg"&gt;&lt;/a&gt; &lt;a href="photo/photo06.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"&gt;&lt;img class="thumb logo" src="photo/photo06.jpg"&gt;&lt;/a&gt; &lt;/div&gt; </code></pre>
 

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