title: Show/hide multiple classes with javascript
body: <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>