Appy Appy - 4 months ago 21
CSS Question

On click accordion twice arrow position doesn't change

I have accordion for that I used "up" and "down" arrow's, it works fine but, when I click again on panel-title arrow doesn't change.

Explain :

In this example I used "A" and "B" instead of "up" and "down" arrow,
When page load all panel-title shows "A",
Once clicked on panel-title "A" change to "B" but again clicked on "B" it doesn't change to "A".

$('#leftMenu .panel-title a').click(function(){
$('#leftMenu .panel-title a').parent('.panel-title').removeClass('accordion-opened');
$(this).parent('.panel-title').addClass('accordion-opened');
});


JSFiddle Here

Answer

This solution would work. Updated fiddle.

Modify your JS to skip the current/clicked one.

$('#leftMenu .panel-title a').click(function() {
  $('#leftMenu .panel-title').not($(this).parent('.panel-title')).removeClass('accordion-opened');
  $(this).parent('.panel-title').toggleClass('accordion-opened');
});

Note:

Solution by Aneesh Sivaraman is failing. To check:

  1. Click the second accordion(Program Description) once.
  2. Now click the first accordion(Issue Type) - It still shows A