Site icon StartFunction

How to select and reveal elements with jQuery

One user asked the other day on the jQuery Tabs tutorial how to highlight the particular tab we selected. In this tutorial we will see some way to select different elements using jQuery, from a basic multiple selection, a multiple selection revealing content and a excluding selection revealing content. See the three examples and read on.

Basic Selection

First things first, we will select an item, deselect it, we won’t worry about the other elements. In this case the markup is a simple list.

[html]
<ul id="block">
<li class="selected">
This is text  that is initially selected.
</li>
<li>
but you can select this too
</li>
<li>
or if you wanna go crazy, select this!
</li>
</ul>
[/html]

We will leave the matter of avoiding multiple selections for the final example. For now, this is as simple as adding and removing a class, or in jQuery, toggling a class.

[js]
jQuery("#block li").click(function(){
jQuery(this).toggleClass("selected");
});
[/js]

The .selected class looks like this

[css]

.selected {  color: #f70; }

[/css]

Done. This basic selection example is really easy but it’s not very useful. Let’s see how to provide your users some kind of important extra information like “You selected this.”

Multiple selection revealing content

This version has the same markup but we will be adding an extra paragraph inside the li element to add some feedback for the user. The p elements that are meant to remain invisible will be given an .invisible class.

[html]
<li class="selected">
This is text  that is initially selected.
<p>
You selected this.
</p>
</li>
<li>
but you can select this too
<p class="invisible">
You selected this.
</p>
</li>
<li>
or if you wanna go crazy, select this!
<p class="invisible">
You selected this.
</p>
</li>
[/html]

The .invisible class has only this:

[css]

.invisible {  display:none; }

[/css]

Now our JS in addition to toggle the class will have to toggle the invisible class for the child p elements. We add the following right after toggling the selected class.

[js]

jQuery(this).children("p").toggleClass("invisible");

[/js]

So this is what we get with the multiple selection revealing content.

Single selection revealing content

Our final example is an exclusive selection. We won’t be able to select two elements. This isn’t limited to a small list selection. You could hide and reveal large areas of your site or you could apply it to the former jQuery Tabs to highlight the tab you’re currently in. We will achieve this highlighting only the title instead of the whole element content like the previous example.

The markup is almost the same but we will wrap the li text with a span element:

[html]

<li>
<span>This is text  that is initially selected.</span>
<p>
jQuery is awesome.
</p>
</li>
<li>
<span>but you can select this too</span>
<p>
Google AJAX API is awesome.
</p>
</li>
<li>
<span>or if you wanna go crazy, select this!</span>
<p>
Web develop is great!.
</p>
</li>

[/html]

On the JS we will now store the currently selected li element for later use:

[js]

var current = jQuery("#block li:first");
jQuery("#block li").click(function(){

current.children("span").removeClass("selected");
current.children("p").addClass("invisible");

jQuery(this).children("span").addClass("selected");
jQuery(this).children("p").removeClass("invisible");

current = jQuery(this);
});

[/js]

We will remove first the .selected classs from the span of the former item and hide its p element. Then we will add the .selected class to the current item and reveal its p element. Done. This is all you need to create and exclusive selection with jQuery.

You can download the file for closer inspection.

I hope you find it useful, see you next time.

Exit mobile version