Question

I have a list that when a link is selected, the div’s associated will hide.

First of all, is there an easier way to write the code to make the selector find the data associated to the button pressed?

Secondly, when multiple links are selected and one is clicked again, the list goes back to default. Is there a fix for this?

    $(document).ready(function() {

        $('#show-free').click(function() {

            if ($('#show-free').hasClass('active')) {
                $('.book[data-price!="0"]').trigger('show')
                $(this).removeClass('active');

            } else {
                $('.book[data-price!="0"]').trigger('hide');
                $(this).addClass('active');
            }
        });

        $('#show-paid').click(function() {

            if ($('#show-paid').hasClass('active')) {
                $('.book[data-price="0"]').trigger('show')
                $(this).removeClass('active');
            } else {
                $('.book[data-price="0"]').trigger('hide');
                $(this).addClass('active');
            }
        });

        $('#show-new').click(function() {

            if ($('#show-new').hasClass('active')) {
                $('.book[data-weeks-on-list="0"]').trigger('show')
                $(this).removeClass('active');
            } else {
                $('.book[data-weeks-on-list="0"]').trigger('hide')
                $(this).addClass('active');
            }
        });


        $('#show-old').click(function() {

            if ($('#show-old').hasClass('active')) {
                $('.book[data-weeks-on-list!="0"]').trigger('show')
                $(this).removeClass('active');
            } else {
                $('.book[data-weeks-on-list!="0"]').trigger('hide')
                $(this).addClass('active');
            }
        });


        $('.book').on('show', function() {
            $(this).show('slow');
        }).on('hide', function() {
            $(this).hide('slow');
        })


    });

Answer 1

To ease finding the data associated with a link use the data() JQuery method maybe

$('.book').filter(function(obj){
   return obj.data('price') != '0';
}

instead of

$('.book[data-price!="0"]')

Actually is that any better – i suspect not. It’s just an alternative.

With the click functions – because you are not returning false in the method then the default behaviour of the link will be fired which i would imagine would cause the links to reset. I would try returning false within the clicks just to supress this behaviour.

Does this help at all?