JS arrays to simplify jQuery filtering 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

&lt;ul class="wwd-filters"&gt;
   &lt;li&gt;&lt;a class="corporate"&gt;&lt;span&gt;Corporate&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a class="commercial"&gt;&lt;span&gt;Commercial&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a class="construction"&gt;&lt;span&gt;Construction&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="wwd-content-each corporate"&gt;
    &lt;h2&gt;Corporate&lt;/h2&gt;
    &lt;div class="wwd-slides"&gt;
    &lt;div class="slides_container"&gt;
        &lt;p&gt;Lorem ipsum lorem ipsum lorem ipsum&lt;/p&gt;                      
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="wwd-content-each commercial"&gt;
    &lt;h2&gt;Commercial&lt;/h2&gt;
    &lt;div class="wwd-slides"&gt;
    &lt;div class="slides_container"&gt;
        &lt;p&gt;Lorem ipsum lorem ipsum lorem ipsum&lt;/p&gt;                      
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


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.
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:

&lt;ul class="wwd-filters"&gt;
   &lt;li&gt;&lt;a data-id="corporate" href="#corporate"&gt;&lt;span&gt;Corporate&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a data-id="commercial" href="#commercial"&gt;&lt;span&gt;Commercial&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a data-id="construction" href="#construction"&gt;&lt;span&gt;Construction&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;