jQuery - toggle link color and paragraph text

Tuesday, 6 January 2009

This is a brief tutorial on how to switch link highlight color and display the corresponding text to the selected link using JQuery.

I have cut things down to the simplest possible stylings and content, but it can be used in many different situations.

The basic idea is having a row of links i.e. Link 1 | Link 2 | Link 3 etc. and a corresponding paragraph of text i.e. Paragraph 1, Paragraph 2 etc.

We want to be able to set which paragraph is selected initially and have the correct link highlighted and have the other paragraphs hidden and links marked in a 'passive' unselected color.

When a new link is selected the new paragraph text is displayed and the correct highlight applied to the currently clicked link.

To do this we need to have a copy of jQuery downloaded into your javascript folder. We will also create two other files; toggle.html in the root folder and toggle.js in our javascript folder.

Our toggle.html file is simple enough; it has a bunch of links and a bunch of text as follows:
<a class="links" href="#">Text 1</a>
<a class="links" href="#">Text 2</a>
<a class="links" href="#">Text 3</a>
<a class="links" href="#">Text 4</a>
<a class="links" href="#">Text 5</a>
<a class="links" href="#">Text 6</a>
<p class="paras">This is my 1 text</p>
<p class="paras">This is my 2 text</p>
<p class="paras">This is my 3 text</p>
<p class="paras">This is my 4 text</p>
<p class="paras">This is my 5 text</p>
<p class="paras">This is my 6 text</p>
Don't forget the reference to the jQuery and toggle.js files in the head.

Now inside the toggle.js we want to set up our document ready function:

Firstly set up three vars; the 'active color' for our active link, the 'passive color' for non-active links and then set up a variable for which paragraph will be selected as default.

$(document).ready(function() {
var activecolor = 'green';
var passivecolor = 'grey';
var activetext = 0;

Next we'll set all the current links to the passive color and hide all the text:

$(".links").css('color', passivecolor);
$(".paras").css('display', 'none');

We then set the active link based upon our activetext variable. We do this using jQuery's eq function

$(".links:eq(" + activetext + ")").css('color', activecolor);
$(".paras:eq(" + activetext + ")").show();
We then finish off by setting the click function for all the other passive links. We do this by first setting all the links to passive, hiding all the paragraphs and then setting the selected text and link to active, similar to what is done initially.

$(".links").click(function() {
// Set all current links to passive and hide all text
$(".links").css('color', passivecolor);
$(".paras").css('display', 'none');
$(this).css('color', activecolor);
var selectedpos = $(this).prevAll(".links").length;
$(".paras:eq(" + selectedpos + ")").show();
return false;
Take note of the ".links" when calling prevAll this is in case there are other child elements similar as $(this) which may result in getting the wrong index, using ".links" narrows down the child elements to this with the links class.
blog comments powered by Disqus