Basecamp style tour page - jquery replace divs using nav menu

Question

I'm trying to spruce up a tour page on my site, and I love the way 37signals' Basecamp tour looks: http://basecamphq.com/tour/#/communicate

I assume they use Jquery or some other equivalent to swap divs, but I am a total jquery noob and am not sure how to go about this.

If anyone has any suggestions or resources to point me to regarding this, it would be much appreciated.

Cheers!

Answer 1

You would have your navigation links on the tour page for each sub-page, they might be like this:

<ul>
  <li>
    <a href="#stuff1" class="tour-nav-link" id="l-1" data-content-id="t-1">Stuff 1</a>
  </li>
  <li>
    <a href="#stuff2" class="tour-nav-link" id="l-2" data-content-id="t-2">Stuff 2</a>
  </li>
</ul>

Notice the data-content-id attribute in the links, you put the ID of the corresponding div tag into those as a way to match them up.

You would also have each of your tour "sub-pages" in their own div. Your tour page would contain code like this:

<div id="t-1" class="tour-item first">
  Stuff goes here
</div>
<div id="t-2" class="tour-item">
  Different stuff goes here
</div>

Using CSS, you can then hide all div's except the first one. This would go in your CSS file:

div.tour-item { display: none; }
div.tour-item.first { display: block; }

Now you just need to switch the visibility on click of the links with jquery:

$('a.tour-nav-link').live('click', function(){
  /* This next line using an animation to hide all div's that are not the selected one */
  $('div.tour-item').not('div#' + $(this).data('content-id')).slideUp();
  /* This will now animate to bring into view the selected one */
  $('div#' + $(this).data('content-id')).slideDown();
});

You can use other animations, or just .show() and .hide() if you want..