How to change background-image for only next h2

Question

jquery

 $(document).ready(function() {
    $(".nag").click(function(){
        $(".nag").not(this).next(".zaw").slideUp("slow");
        $(this).next(".zaw").slideToggle("slow");
        $("h2").css("background-image", "url(img/arr_top.png)");    
        });
    });

HTML

    <div class="nag">
       <h2>H2</h2>
    </div>
    <div class="zaw">
     </div>
<div class="nag">
       <h2>H2</h2>
    </div>
    <div class="zaw">
     </div> 
<div class="nag">
       <h2>H2</h2>
    </div>
    <div class="zaw">
     </div>     

Hi, this is my code to slide up div after click one of div's. After second click slideToggle.

What should i add to jquery to change background-image for only next h2 (now all h2 changed after click) after click and after second click background-image goes back to first value of background-image (img/arr.png)

I would be very grateful for your help, because the matter seems simple and I have two days add .next () in different places for nothing :)

Answer 1

Currently you're getting global selector i.e. h2 and not using h2 inside clicked element.

Replace this:

$("h2").css("background-image", "url(img/arr_top.png)");   

With this:

$(this).find("h2").css("background-image", "url(img/arr_top.png)");