Grow your CSS skills. Land your dream job.

jQuery toggle show/hide on class and change current class?

  • # February 15, 2010 at 5:38 pm

    Hey,

    I’m stuck while learning jQuery.

    When somebody clicks the anchor ‘.wid1235 a.min’ I want to hide() ‘.wid1235 .content’ and change ‘.wid1235 a.min’ to ‘.wid1235 a.max’

    Then when somebody clicks the anchor ‘.wid1235 a.max’ I want to show() ‘.wid1235 .content’ and change ‘.wid1235 a.max’ to ‘.wid1235 a.min’

    Because .wid1235 varys, does anybody know a way to do this while not having to define each .wid…. each time?

    Code:


    Title

    So far I have this, a whole bunch of unsemantic code :( that doesn’t even work. I was going to use PHP to create new code based on the different widgets :/

    Code:
    $(function(){

    $(‘.wid1234 a.min’).click(function(){ $(‘.wid1234 .content’).hide(); $(this).removeClass(‘min’); $(this).addClass(‘max’); });
    $(‘.wid1234 a.max’).click(function(){ $(‘.wid1234 .content’).show(); $(this).removeClass(‘max’); $(this).addClass(‘min’); });

    $(‘.wid1236 a.min’).click(function(){ $(‘.wid1236 .content’).hide(); $(this).removeClass(‘min’); $(this).addClass(‘max’); });
    $(‘.wid1236 a.max’).click(function(){ $(‘.wid1236 .content’).show(); $(this).removeClass(‘max’); $(this).addClass(‘min’); });

    $(‘.wid1237 a.min’).click(function(){ $(‘.wid1237 .content’).hide(); $(this).removeClass(‘min’); $(this).addClass(‘max’); });
    $(‘.wid1237 a.max’).click(function(){ $(‘.wid1237 .content’).show(); $(this).removeClass(‘max’); $(this).addClass(‘min’); });
    });

    Thanks a whole bunch!

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".