jQuery slidetoggle to also toggleclass

Question

Hi I want to toggle a class when I slidetoggle my blocks. On default I have them loading the right arrow unless its already open, I've done this manually in my HTML.

I've used the following code:

$(this).toggleClass("entypo chevron-right");

However this inputs the chevron-right in the wrong place. I want it to be added to the following section:

<h3 class="showpageblock"><span class="entypo chevron-down"></span> Site settings</h3>

However when I target this replacing $(this) with the target above i.e. $(.showpageblock span) then it replaces all the classes rather than the clicked element.

I'm not sure if the way I've tried to implement this is right, as I don't think the JS would recognise when to insert the down and the right arrow respectively. I feel like the JS needs to know which one is active and which one isn't. My experience is basic so I'm unsure of the correct method. If someone could point me into the right direction that would be much appreciated.

Click below to view my JSFiddle.

JSFIDDLE

Answer 1

$(this) is actually pointing to <h3 class="showpageblock"> and not to <span class="entypo chevron-down"></span> which is inside the "h3" tag.

change this

$(this).toggleClass("entypo chevron-right");

to

$(this).find('span').toggleClass("entypo chevron-right");

LIVE DEMO:

http://jsfiddle.net/dreamweiver/5umDs/2/

Happy Coding :)