Question

I have several div tags containing simple html/css content and I need a simple way for a viewer to click a link ‘Slide 1’ and the first div tag for that slide become visible, then they click slide 2 and the second div tag is visible, and so on.

i tried using timelines in Dreamweaver but that seems like overkill and far too complex. So is pulling in the whole YUI library. Just a basic, brute force, make visible/invisible when a link is clicked is all we need.

so the setup is

     <LINK_SLIDE1>  <LINK_SLIDE2>  <LINK_SLIDE3>
<div class="slide" id="slide1">
  <p>Welcome etc etc etc</p>
</div
<div class="slide" id="slide2">
  <p>Overview etc etc etc</p>
</div
<div class="slide" id="slide3">
  <p>Summary etc etc</p>
</div

And I’m looking for some tips on how to implement the LINKs to toggle the visiblity of each div tag on/off. One problem I’m worried about is if a user doesnt have javascript enabled, can we handle that case too.

Answer 1

The basic flow when the user clicks the link should be:

1. Hide all divs with the class ‘slide’.
2. Show the div with the id “slideX” (where X is determined by the link clicked).

You can do this by adding event listeners to each link, then figuring out by which link was clicked, which slide to show. For problems like this using the rel attribute in the link is a quick way to store this info.

Here’s an example using no framework whatsoever, and I haven’t tested it. Just for an example.

var slides = document.getElementsByClassName('slide');
function showSlide(e) {
    var toShow = e.target.getAttribute('rel');
    for (var i = 0, len = slides.length; i < len; i++) {
        slides[i].style.display = 'none';
    }
    document.getElementById(toShow).style.display = 'block';
    e.preventDefault();
    return false;
}

var links = document.getElementsByClassName('slide-link');

for (var i = 0, len = links.length; i < len; i++) {
    links[i].addEventListener('click', showSlide, false);
}

and example HTML to go with it:

<a href="#" class="slide-link" rel="slide1">Welcome</a>
<a href="#" class="slide-link" rel="slide2">Overview</a>

<div class="slide" id="slide1">
    <p>Welcome etc etc etc</p>
</div>
<div class="slide" id="slide2">
    <p>Overview etc etc etc</p>
</div>

Hopefully that can get you on the right track.