Selecting a div with same ID as the rel attribute of clicked link

Question

Hi there,

This is a two-part question. I'm using jQuery for a project and wanting to click a link and toggle the class name "highlight" to that link and also to the div with the same id as the rel attribute of the link. I then want to be able to link to the next div without the classname of "highlight". Here's the HTML for it:

<ul>
   <li><a href="#" rel="panel1">Item 1</a></li>
   <li><a href="#" rel="panel2">Item 2</a></li>
   <li><a href="#" rel="panel3">Item 3</a></li>
</ul>  

<a href="">go to next div without class of highlight</a>


<div id="panel1">some text</div>
<div id="panel2">some text</div>
<div id="panel3">some text</div>

Can anyone help with jQuery side of things?

Many thanks in advance!

Answer 1

Assuming HTML like this:

<ul>
  <li><a href="#" rel="panel1">Item 1</a></li>
  <li><a href="#" rel="panel2">Item 2</a></li>
  <li><a href="#" rel="panel3">Item 3</a></li>
</ul>

<a id="next-unhighlighted">Go to next div without class "highlight"</a>

<div class="panel" id="panel1">Panel 1</div> <!-- Note the added -->
<div class="panel" id="panel2">Panel 2</div> <!-- "panel" classes -->
<div class="panel" id="panel3">Panel 3</div>

You can use JS like this:

$('ul li a').click(function(){
  var $this = $(this), // <a>
      id    = $this.attr('rel'),
      nextUnhighlighted = $('#next-unhighlighted'), // <a>
      targetDiv = $('#' + id),
      nextDiv;

  // Un/highlight the clicked link
  $this.toggleClass('highlight');

  // Un/highlight the div related to the target link
  targetDiv.toggleClass('highlight');

  // Update nextUnhighlighted to point to next unhighlighted div
  nextDiv = $('div.panel:not(.highlight)');
  if(!!nextDiv[0]){ // A next sibling was found
    nextUnhighlighted.attr('href', '#' + nextDiv.attr('id'));
  }else{
    nextUnhighlighted.removeAttr('href');
  }
});

​ Note that, if the final panel is already highlighted, then this code does not update the href attribute for a#next-unhighlighted, but removes it. It's a trivial exercise to add wrap-around behavior, such that highlighting the final panel would link back to the first panel.

A note about the odd syntax !!nextDiv[0]: If the first element in the jQuery collection nextDiv exists, then there is at least one element in the collection. This behaves similarly to (but not exactly the same as) nextDiv.length > 0, but is marginally faster, and saves bytes.

---

As discussed in the comments, to link each panel to the next unhighlighted one, add <a rel="next-panel">Next panel</a> to each panel's HTML, then add something like this to the main click handler:

$('div.panel a[rel="next-panel"]').each(function(){
  var $this = $(this),
      nextPanel = $this.parent().next('div.panel:not(.highlight)');
  if(!!nextPanel[0]){
    $this.attr('href', '#' + nextPanel.attr('id'));
  }
});

Depending on your project requirements, you'll need to initialize each of these next-panel links (or else they'll only initialize after the first click), and you may want to make the final panel's ;oml wrap around to the first.