jquery: hide/show based on variable for class name

Question

I am pretty new to jQuery and need some help with filtering classes. The user can choose from nine buttons to select which event types to show/hide. Click a color and only events with that color show and the rest are hidden. Click "all" and all events show with none hidden. All events start out with display:block.

Example control buttons:

<li class="all" id="all-events"><a href="#" onclick="showEvents('event-all')">
<img src="swatch-all.png" alt="" /></a></li>

<li class="red" id="red-events"><a href="#" onclick="showEvents('event-red')">
<img src="swatch-red.png" alt="" /></a></li>

<li class="blue" id="blue-events"><a href="#" onclick="showEvents('event-blue')">
<img src="swatch-blue.png" alt="" /></a></li>

The events are pulled from a database by php and look like this example:

<div id="bigCal">
    <p class="all"><a href="http://foo.com" title="All event">All events</a></p>
    <p class="blue"><a href="http://bar.com" title="Blue event">Blue event</a></p>
    <p class="red"><a href="http://foobar.com" title="Red event">Red event</a></p>
</div>

I've been working on the jQuery for two days! Not sure whether to use .filter or .hasClass or .is. None of it works. The simplest I tried was:

function showEvents(color) {
    ($('p').hasClass(color)) ? this.style.display="block" : this.style.display="none";
}

Another attempt that did nothing was

function showEvents(color){
    $("p[className*='event-']").css('display', 'none');
    $("p[className=color]").css('display', 'block');
    if ($("p[className='event-all']")) 
        $("p[className*='event-']").css('display', 'block');
}

Any help will be appreciated!

Answer 1

Here is an example of how to do this.

http://jsfiddle.net/YnFWX/1/

I am not using images, but you will get the idea. Notice that I am not assigning javascript by using the 'onclick' event. Much cleaner if you do it via jQuery.

Hope this gets you started.

Bob