JQuery Toggle Class Issue

JavaScript
1

I’m trying to achieve an effect of the arrow changing when an accordion box is opened using .toggleClass however I can’t seem to get it to work.

Could someone advise please or point me in the right direction?

Thanks

http://cookingsecrets.togetheragency.co.uk:8080/myrange.htm

$(".accordion .oTitleHolder:first ").addClass("active");
	$(".accordion .oHiddenLayer:not(:first)").hide();
	$(".accordion .oTitleHolder").click(function(){

	  $(this).next(".oHiddenLayer").slideToggle("slow")
	   .siblings(".oHiddenLayer:visible").slideUp("slow");
	  $(this).toggleClass("active");
	  $(this).children(".oTitleIcon a").toggleClass('open');
	  $(this).siblings(".oTitleHolder").removeClass("active");
	 

	});

.close  {
	background:url(../../images/common/accordian-close-arrow.gif) no-repeat;
	width:20px;
	height:20px;
	display:block;
	border:0px solid red;
	float:right;
	margin-top:10px;
	}
	
.open {
	background:url(../../images/common/accordian-open-arrow.gif) no-repeat;
	width:20px;
	height:20px;
	display:block;
	border:0px solid red;
	float:right;
	margin-top:10px;
	}
2

Hi,

Yes it is http://cookingsecrets.togetheragency.co.uk:8080/myrange.htm

Thanks

3

Could you post (or PM) the URL of a live example?

4

Thanks for that really helpful.

5

Since you’re also adding the class “active” to the selected elements, why not let the CSS biggybag on that?

What I mean is, change the JS to:

$(".accordion .oTitleHolder").click(function(){
   $(this).next(".oHiddenLayer").slideToggle("slow")
     .siblings(".oHiddenLayer:visible").slideUp("slow");
   $(this).toggleClass("active");
   $(this).siblings(".oTitleHolder").removeClass("active");
});

And then change the CSS to:

.active .oTitleIcon a, .oTitleIcon a {
    background:url(../../images/common/accordian-close-arrow.gif) no-repeat;
    width:20px;
    height:20px;
    display:block;
    border:0px solid red;
    float:right;
    margin-top:10px;
    }
    
.active .oTitleIcon a {
    background: url(../../images/common/accordian-open-arrow.gif) no-repeat;
}

Works fine for me :slight_smile:

6

Thanks but that doesn’t work I think it must be the object it is trying to match on?

7

Try

.toggleClass(‘open close’);

That will remove the class “open” if the node has it, or add it otherwise. The same goes for “close”. So if the node if either one of those at the start it will remove it and add the other :slight_smile:

Also, your CSS can be pruned a lot:


.close, .open  {
	background:url(../../images/common/accordian-close-arrow.gif) no-repeat;
	width:20px;
	height:20px;
	display:block;
	border:0px solid red;
	float:right;
	margin-top:10px;
	}
	
.open {
	background-image: url(../../images/common/accordian-open-arrow.gif);
}

:slight_smile: