CODEWITHSUNDEEP
javascriptjquerycssaccordionjquery-ui-accordion
Dan Lee
Dan Lee

Reputation: 704

Accordion Toggle Arrows

I'm trying to work out how I can reset my toggle arrows when opening another accordion panel when one is already open. I have managed to toggle it on the open and close of one panel - but leaving it open and opening another panel has me stumped....

View the JSFiddle

HTML

<div class="accord-header">
   <img class="arrow-img rotate" src="img.jpg" />
   <h3>Title</h3>
</div>

<div class="accord-content">
   <p>Content goes here</p>
</div>

Javascript

$(document).ready(function() {
      $(".accordion .accord-header").click(function() {

        $(this).children("img").toggleClass('rotate2');


      if($(this).next("div").is(":visible")){
        $(this).next("div").slideUp("normal");


      } else {
        $(".accordion .accord-content").slideUp("normal");
        $(this).next("div").slideToggle("normal");
      }
    });
});

Upvotes: 1

Views: 2096

Answers (3)

DaniP
DaniP

Reputation: 38252

You can search for the actual img with class rotate2 and then remove it, just add this line:

$('.rotate2').removeClass('rotate2');

$(".accordion .accord-header").click(function () {
    $('.rotate2').removeClass('rotate2');
    $(this).find("img").toggleClass('rotate2');
    if ($(this).next("div").is(":visible")) {
        $(this).next("div").slideUp("normal");
    } else {
        $(".accordion .accord-content").slideUp("normal");
        $(this).next("div").slideToggle("normal");
    }
});

DemoFiddle

Edit

Solved the problem when you try to open/close each panel and doesn't change the arrow on the element itself. You can exclude the actual img:

var im = $(this).find('img');
$('.rotate2').not(im).removeClass('rotate2');
im.toggleClass('rotate2');

AnotherDemoFiddle

Upvotes: 1

user488187
user488187

Reputation:

It looks like you had some stray code after the else:

        $(".accordion .accord-content").slideUp("normal");

This slides all of the content up, not just the next. Remove it.

See Fiddle.

Upvotes: 0

Alex Olkhovskii
Alex Olkhovskii

Reputation: 136

I suppose you need something like this:

    $(document).ready(function() {
      $(".accordion .accord-header").click(function() {
          $(".accordion .accord-header").children("img").removeClass('rotate2');
          $(this).children("img").toggleClass('rotate2');

          if($(this).next("div").is(":visible")){
              $(this).next("div").slideUp("normal");
          } else {
              $(".accordion .accord-content").slideUp("normal");
              $(this).next("div").slideToggle("normal");
          }
    });
});

You should remove all rotate2 classes before add class for current element.

Upvotes: 0

Related Questions