JS arrays to simplify jQuery filtering

Question

Okay, I'm under the impression that my current jQuery can be simplified (don't worry! It's short!) and I'm curious to know how this can be achieved. I think a solution to this will help produce a lot less code.

I currently have a list menu set up, with class names referring to their titles (HTML below) and if you click a list item, the menu item slides out and it's relevant content fades in. If you click the main heading again, the content fades out and the menu item slides back in.

Here's an example of my HTML

<ul class="wwd-filters">
   <li><a class="corporate"><span>Corporate</span></a></li>
   <li><a class="commercial"><span>Commercial</span></a></li>
   <li><a class="construction"><span>Construction</span></a></li>
</ul>

<div class="wwd-content-each corporate">
    <h2>Corporate</h2>
    <div class="wwd-slides">
    <div class="slides_container">
        <p>Lorem ipsum lorem ipsum lorem ipsum</p>                      
        </div>
    </div>
</div>
<div class="wwd-content-each commercial">
    <h2>Commercial</h2>
    <div class="wwd-slides">
    <div class="slides_container">
        <p>Lorem ipsum lorem ipsum lorem ipsum</p>                      
        </div>
    </div>
</div>

Here's some example JS:

jQuery('.wwd-choices-container ul.wwd-filters li a.corporate').click(function () {
    jQuery('.wwd-content-container .wwd-content-each').fadeOut();
    jQuery('.wwd-content-container .wwd-content-each.corporate').fadeIn();
});

My problem is that I don't want to have to repeat the jQuery code for each list item and it's content (e.g. li a.corporate, li a.commercial, li a.li a.corporate). As the class names for both the list item anchor and each content, is there an easy way to simplify this?

Everything is built via a CMS, so new sections and menu items would be added as time goes on so it has to remain as dynamic as possible. I'm thinking some form of array would work... and if it matches each other then it connections.

Answer 1

I would recommend using the .on() for click event delegation:

$('.wwd-filters').on('click', 'a', function(e) {
    e.preventDefault();
    var id = $(this).data('id');
    jQuery('.wwd-content-container .wwd-content-each').fadeOut();
    jQuery('.wwd-content-container .wwd-content-each.' + id).fadeIn();
});

This implementation grabs the id of the section you wish to show via the data attribute in the a elements:

<ul class="wwd-filters">
   <li><a data-id="corporate" href="#corporate"><span>Corporate</span></a></li>
   <li><a data-id="commercial" href="#commercial"><span>Commercial</span></a></li>
   <li><a data-id="construction" href="#construction"><span>Construction</span></a></li>
</ul>

Answer 2

In the click handler you have a reference to the link that was clicked, so you can just select the relevant item from this. Here I've used the href of the link to point at an ID for each item, which makes it simple to do jQuery(this.hef) to select the item to fade in. It might not be convenient for you to use the ID element, in which case you can put them in a data attribute or something.

<ul class="wwd-filters">
   <li><a href="#corporate"><span>Corporate</span></a></li>
   <li><a href="#commercial"><span>Commercial</span></a></li>
   <li><a href="#construction"><span>Construction</span></a></li>
</ul>

<div class="wwd-content-each" id="corporate">
    <h2>Corporate</h2>
    <div class="wwd-slides">
    <div class="slides_container">
        <p>Lorem ipsum lorem ipsum lorem ipsum</p>                      
        </div>
    </div>
</div>
<div class="wwd-content-each" id="commercial">
    <h2>Commercial</h2>
    <div class="wwd-slides">
    <div class="slides_container">
        <p>Lorem ipsum lorem ipsum lorem ipsum</p>                      
        </div>
    </div>
</div>

Then you should just need this one snippet:

jQuery('.wwd-choices-container ul.wwd-filters li a').click(function () {
    jQuery('.wwd-content-container .wwd-content-each').fadeOut();
    jQuery(this.href).fadeIn();
    return false;
});