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).paren开发者_StackOverflow中文版t().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
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/
You can make use of jquery's addClass() and removeClass() to add and remove classes .
精彩评论