Show/hide multiple classes with javascript

Question

Possible Duplicate:
what is the solution to remove/add a class in pure javascript?

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.

I am building an image gallery with a series of thumbnails that all have classes assigned to them; .photo, .print and .logo. The desire is to have four 'buttons'; photo, print, logo and display all. When the user clicks "photo" the code will set .photo to display:block, and .print and .logo to display:none. When the user clicks "print" the code will set .print to display:block, and .photo and .logo to display:none. When the user clicks "logo" the code will set .logo to display:block, and .photo and .print to display:none. And obviously when the user clicks "display all" all classes are set to display:block.

<div id="menu">
<ul class"toplevel">
<li id="photoselect"><a href="photo.html">Photography</a></li>
<li id="logoselect"><a href="logo.html">Print</a></li>
<li id="printselect"><a href="print.html">Logo</a></li>
</ul>
</div>
<div id="content">
<a href="photo/photo01.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb photo" src="photo/photo01.jpg"></a>
<a href="photo/photo02.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb photo" src="photo/photo02.jpg"></a>
<a href="photo/photo03.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb print" src="photo/photo03.jpg"></a>
<a href="photo/photo04.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb print" src="photo/photo04.jpg"></a>
<a href="photo/photo05.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb logo" src="photo/photo05.jpg"></a>
<a href="photo/photo06.jpg" class="" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb logo" src="photo/photo06.jpg"></a>
</div>

score 1 · Answer 1 · answered Jan 06 '13 at 18:22

Or you could take advantage of css3 (for browser which support it)

<!doctype html>
<html>
<head>
<style>
#content > input.hidden{ display:none; }
#content > a{ display:none; }
#po:checked ~ a.photo{ display:block; }
#pi:checked ~ a.print{ display:block; }
#lo:checked ~ a.logo{ display:block; }
#al:checked ~ a{ display:block; }
</style>
</head>
<body>
<div id="menu">
<ul class"toplevel">
<li><label for="po">Photography</label></li>
<li><label for="pi">Print</label></li>
<li><label for="lo">Logo</label></li>
<li><label for="al">All</label></li>
</ul>
</div>
<div id="content">
<input type="radio" name="bfc" id="po" class="hidden" />
<input type="radio" name="bfc" id="pi" class="hidden" />
<input type="radio" name="bfc" id="lo" class="hidden" />
<input type="radio" name="bfc" id="al" class="hidden" />
<a href="photo/photo01.jpg" class="photo" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo01.jpg"></a>
<a href="photo/photo02.jpg" class="photo" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo02.jpg"></a>
<a href="photo/photo03.jpg" class="print" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo03.jpg"></a>
<a href="photo/photo04.jpg" class="print" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo04.jpg"></a>
<a href="photo/photo05.jpg" class="logo" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo05.jpg"></a>
<a href="photo/photo06.jpg" class="logo" rel="lightbox" title="Caption from the anchor's title attribute"><img class="thumb" src="photo/photo06.jpg"></a>
</div>
</body>
</html>

score 0 · Answer 2 · answered Jan 06 '13 at 18:37

Just to give you an idea of how to do it without any libraries (and with the HTML you posted), here's a basic way of going about it:

Add an event listener on the link you want to respond to a click event for
On click, go through all of the matching elements and change their style

It's good to cache your photos prints and logos so that you don't have to query for them on each click.

var content = document.getElementById('content'); 
var photos = content.getElementsByClassName('photo');
var prints = content.getElementsByClassName('print');
var logos = content.getElementsByClassName('logo');

function changeDisplay(elements, display) {
  var i = 0, l = elements.length;
  for( ; i < l; i++) {
    elements[i].style.display = display;
  }
}

document.getElementById('photoselect').addEventListener('click', function (e) {
  changeDisplay(prints, 'none');
  changeDisplay(logos, 'none');
  changeDisplay(photos, 'block');
}, false);

Thank you, doing this without the need for a library is why I asked if there was a Javascript solution. I would prefer a pure HTML/CSS solution but until the browsers catch up I don't believe we can rely on CSS3 yet. I will give this a go. I'm assuming two aspects here: 1. The four lines at the top, they are the cache? I expect that speeds up the process or reduces the code you need to write? 2. The section at the bottom will be command attached to the 'photoselct' button/link, and this will be repeated for each button/link? — user1953171, Jan 06 '13 at 19:18
Exactly; by cache I just meant the 3 arrays of elements that you reuse in each event listener. You just need to add a listener for each button. — bokonic, Jan 07 '13 at 04:39

Show/hide multiple classes with javascript

2 Answers2