jquery: hide/show based on variable for class name

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!

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

You're on the right track, but you seem to be passing "event-all" into showEvents instead of just "all".

So if you change your onclick code to showEvents('all'), showEvents('blue'), etc... it should work.

However, I'd approach this differently. It's far easier to assign your onclick handlers using jQuery in the first place, and find out the color that was clicked within this handler by looking at the class on the <li>, rather than passing it in.

// The is the same as onclick=.... but for ALL <a> elements within an <li>
$("li > a").click(function () {

   // Find the color that was clicked
   var color = $(this).parent().attr("class");

   // "All" is a special case
   if (color == "all") {
      // Show all <p>s in div with ID "bigCal"
      $("#bigCal p").show();
   } else {
      // Hide all <p>s in div with ID "bigCal"
      $("#bigCal p").hide();

      // Show the <p> with the same class
      $("#bigCal p." + color).show();
   }

});

function showEvents(color){
var csscol=color.split('-')[1];//will return red/blue/all from event-red/event-blue/event-all
$('p[class!=' + csscol + ']').hide(); //hide all not equal to csscol
$('p[class=' + csscol + ']').show(); //show all equal to csscol
}

This is the solution I have for you. I changed your onclick calls to reflect the actual name of your classes.

Javascript

function showEvents(color) {
         if(color!='all')
         {
            jQuery('#bigCal > p').hide();
            jQuery('.'+color).show();
         }
         else{jQuery('#bigCal > p').show();}
      }

HTML

<ul>
      <li class="all" id="all-events">
        <a href="#" onclick="showEvents('all')">Show All</a>
      </li>
      <li class="red" id="red-events">
        <a href="#" onclick="showEvents('red')">Show Red</a>
      </li>
      <li class="blue" id="blue-events">
        <a href="#" onclick="showEvents('blue')">Show Blue</a>
      </li>
    </ul>
   <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>

That said - I found Visual jQuery invaluable while I was learning jQuery: http://api.jquery.com/visual/

function showEvents(color){
 if(color=='event-all'){
   $('p').css('display','block');
 }else{
   $('p').css('display','none');
   $('p.'+color.replace('event-','')).css('display','block');
 }
}

function showEvents(color){
    $(p["class^='event-'"]).each(function() {
       if(!this.hasClass(color))this.hide();//or .css(display:none;)
       else {this.show()};
})

I think this should be the solution if i understood your question correctly. FJ