Condense repetitive jQuery functions

Question

I'm looking for a way to reduce the bloat of my jQuery functions to combine the repetitive functions into one cover all script.

I have a series of category buttons that, on click, filter a list of elements to only show those that correspond to the matching category.

My code works fine however it is repeated 11 times for each 'category' adding some serious bloat to the page.

||| JSFiddle is here |||

A sample of one of the functions is below...

$('#toggle-greendeal').click(function() {

    $('.update-greendeal').show(200);
    $('.update-broker').hide(200);
    $('.update-cases').hide(200);
    $('.update-training').hide(200);
    $('.update-collections').hide(200);
    $('.update-debt').hide(200);
    $('.update-wealth').hide(200);
    $('.update-business').hide(200);
    $('.update-solar').hide(200);
    $('.update-pension').hide(200);
    $('.update-welfare').hide(200);

    $('#toggle-all').addClass('toggle-inactive');
    $('#toggle-broker').addClass('toggle-inactive');
    $('#toggle-cases').addClass('toggle-inactive');
    $('#toggle-training').addClass('toggle-inactive');
    $('#toggle-collections').addClass('toggle-inactive');
    $('#toggle-debt').addClass('toggle-inactive');
    $('#toggle-wealth').addClass('toggle-inactive');
    $('#toggle-business').addClass('toggle-inactive');
    $('#toggle-solar').addClass('toggle-inactive');
    $('#toggle-pension').addClass('toggle-inactive');
    $('#toggle-welfare').addClass('toggle-inactive');

    $('#toggle-greendeal').removeClass('toggle-inactive');

    return false;

});

The first section of the function shows the divs in the correct category class and hides all other non-matching classes.

The second section 'greys out' all the buttons except the one that is clicked.

The code is repeated for #toggle-greendeal , #toggle-broker , #toggle-cases , #toggle-training , #toggle-collections , #toggle-debt , #toggle-wealth , #toggle-business , #toggle-solar , #toggle-pension , #toggle-welfare .

I know there must be a way but I'm not sure what methods to start with and what technique to use to locate the classes based on which id is clicked.

Can anyone point me in the right direction or give me an easy fix?

Answer 1

It can be simplified using a data-target attribute

<div class="product-toggle-buttons">
    <div class="toggle-button single-line" id="toggle-all" data-target="">View all updates</div>
    <div class="toggle-button" id="toggle-greendeal" data-target=".update-greendeal">Green-Deal ECO</div>
    <div class="toggle-button single-line" id="toggle-cases" data-target=".update-cases">Cases</div>
    <div class="toggle-button single-line" id="toggle-training" data-target=".update-training">Training</div>
    <div class="toggle-button" id="toggle-broker" data-target=".update-broker">Broker-Lender</div>
    <div class="toggle-button" id="toggle-debt" data-target=".update-debt">Debt Management</div>
    <div class="toggle-button single-line" id="toggle-collections" data-target=".update-collections">Collections</div>
    <div class="toggle-button" id="toggle-wealth" data-target=".update-wealth">Alternative Investment</div>
    <div class="toggle-button single-line" id="toggle-business" data-target=".update-business">Business</div>
    <!--<div class="toggle-button single-line" id="toggle-solar">Solar  </div>
    <div class="toggle-button" id="toggle-welfare">Welfare Rights</div>
    <div class="toggle-button" id="toggle-pension">Pension Transfer</div>-->
</div>

then all the click events can be simplified to

$(function () {

    $('.product-toggle-buttons .toggle-button').not('#toggle-all').addClass('toggle-inactive');

    var $items = $('.update-item');
    var $buttons = $('.product-toggle-buttons .toggle-button').click(function () {
        var $this = $(this),
            target = $this.data('target');

        $buttons.not($this).addClass('toggle-inactive');
        $this.removeClass('toggle-inactive');

        if (target) {
            $items.not(target).hide(200);
            $(target).show(200);
        } else {
            $items.show(200);
        }

        return false;

    });
});

Demo: Fiddle

Answer 2

You can do shorten it with attribute selectors:

$('#toggle-greendeal').click(function(e) {
    $('[class^="update"]').hide(200);
    $('.update-greendeal').show(200);

    $('[id^="toggle"]').addClass('toggle-inactive');
    $(this).removeClass('toggle-inactive');

    e.preventDefault();
});

Answer 3

You can use the following:

$('.update-greendeal, .update-broker, ....., .update-welfare').show(200);

Or you can add another class to all 11 elements let's say it will be updating and call

$('.updating').show(200)

The same for addClass("toggle-inactive");