CODEWITHSUNDEEP
javascriptjqueryaddclassremoveclasstoggleclass
sat
sat

Reputation: 1009

jquery how to change class of parent div on toggle

When I slideToggle the simple accordian that I have, I would like to change the class of the link element and the .revealBox div that wraps the whole accordion depending on whether the accordion is opened or closed

my jquery is

$(document).ready(function() {
    // choose text for the show/hide link - can contain HTML (e.g. an image)
    var showText = 'Hide Information';
    var hideText = 'Show Information';
    var is_visible = false;
    $('.collapseLink').append('<span class="dottedBot">' + showText + '</span>');
    $('.revealBoxContents').show();
    $('a.collapseLink').click(function() {
        // switch visibility
        is_visible = !is_visible;
        // change the link depending on whether the element is shown or hidden
        $(this).html((!is_visible) ? showText : hideText);
        // toggle the display - uncomment the next line for a basic "accordion" style
        //$('.toggle').hide();$('a.toggleLink').html(showText);
        $(this).parent().next('.revealBoxContents').slideToggle('slow');
        // return false so any link destination is not followed
        return false;
    });
    // toggle the bottom link
    $('.collapseLink').click(function() {
        $(this).parents('.revealBoxContents').stop(true, true).slideToggle('slow');
        $(".collapseLink").html((!is_visible) ? showText : hideText);
        $(this).parent('.item').toggleClass('current');

    });
});

my Url is

http://satbulsara.com/NSJ-local/eqs1.htm

Thanks,

Sat

Upvotes: 0

Views: 5790

Answers (2)

Abdul Kader
Abdul Kader

Reputation: 5842

You can make use of jquery's addClass() and removeClass() to add and remove classes .

Upvotes: 1

Jibou
Jibou

Reputation: 449

You want to use the addClass() function on the element.

http://api.jquery.com/addClass/

You can also do that using toggleClass() as seen on jQuery documentation :

$('div.foo').toggleClass(function() {
      if ($(this).parent().is('.bar')) {
        return 'happy';
      } else {
        return 'sad';
      }
});

http://api.jquery.com/toggleClass/

Upvotes: 3

Related Questions