jQuery slide toggle hiding wrong element when clicked

Question

I have a jQuery to toggle content when the heading class is clicked.

 $(".heading").click(function(){
     $(this).next("div").slideToggle(500);
     $(this).toggleClass("close-icon open-icon");
});

The slide toggle was working fine until I added the toggle class line to display an image indicating if the toggle is open or closed. Now the display for .heading is being toggle along with the div.

I was able to fix this problem by changing the toggleClass line to

$(".close-icon, .open-icon").toggleClass("close-icon open-icon");

However I have multiple heading classes so without using $(this) the images will change on all of the headings and not just the one that is being pressed.

<div class="heading">
    <h1>Projects</h1>
    <span class="close-icon">
    </span>
</div>

<div class="flexslider">

</div>

<div class="heading">
     <h1>About</h1>
     <span class="close-icon">
     </span>
</div>

<div class="about">

</div>

<div class="heading">
      <h1>Contact</h1>
      <span class="close-icon">
      </span>
</div>

<div class="contact">

</div>

Answer 1

It seems that you're adding the click event to the div, but the close-icon class resides on the span inside the div.

Try the following:

$(".heading").click(function(){
     $(this).next("div").slideToggle(500);
     $(this).find('span').toggleClass("close-icon open-icon");
});