Question

I’ve recentley learnt how to change a class on a click, however i’m now trying something a little more tricky and getting stuck.

I need to change the class on a button click, but also hide a div at the same time.

Here’s what I have so far:

    <script type="text/javascript">
        $('button').click(function(e) {
            if ($(this).hasClass('grid')) {
                $('#primary ul').removeClass('stylelist').addClass('grid');
                $('#single-style-text').hide();
            }
            else if($(this).hasClass('list')) {
                $('#primary ul').removeClass('grid').addClass('stylelist');
                $('#single-style-text').show();
            }
        });
    </script>

The div #single-style-text is what i’m trying to hide whenever the grid class is active, and have it show when the stylelist class is active.

Is there a better way to write this code?

Thanks

Answer 1

i’d try something like this:

$('button').click(function(e) {
    var button = $(this);
    var hasGrid = button.hasClass('grid');

    $('#primary ul')
        .toggleClass('stylelist', hasGrid)
        .toggleClass('stylegrid', !hasGrid);
    button
        .toggleClass('list', hasGrid)
        .toggleClass('grid', !hasGrid);

    $('#single-style-text').toggle(hasGrid);
});

can give a more specific example if i see some more markup… but this is the basics by toggling classes…

example on jsfiddle:
http://jsfiddle.net/Xc7pH/2/