Accordion with icon on expanded

Question

 $(document).ready(function($) { $('#accordion').find('.accordion-toggle').addClass('icon-rotate'); $('#accordion').find('.accordion-content.default').prev('h4').removeClass('icon-rotate'); $('#accordion').find('.accordion-toggle').click(function(e) { $(this).next().slideToggle().addClass('expanded').prev('h4').removeClass('icon-rotate'); $(".accordion-content").not($(this).next()).slideUp().removeClass('expanded').prev('h4').addClass('icon-rotate'); }); }); 

 /* Accordion - Left Panel */ /* line 4, ../sass/my-request.scss */ .filter-panel .accordion-header { background: #506070; color: #FFF; font-size: 16px; padding: 15px; font-weight: 600; } /* line 11, ../sass/my-request.scss */ .filter-panel .accordion-toggle-first { cursor: pointer; margin: 0; font-size: 14px; color: #333; background: #F6F6F6; padding: 15px 20px; font-weight: 600; border: 1px solid #DEDEDE; border-top: 0; } /* line 22, ../sass/my-request.scss */ .filter-panel .accordion-toggle { cursor: pointer; margin: 0; font-size: 14px; color: #333; background: #F6F6F6; padding: 11px 20px; font-weight: 600; border: 1px solid #DEDEDE; border-top: 0; } /* line 33, ../sass/my-request.scss */ .filter-panel .accordion-content { display: none; font-weight: 600; border: 1px solid #DEDEDE; border-top: 0; } /* line 39, ../sass/my-request.scss */ .filter-panel .accordion-content ul li { padding: 10px 30px; } /* line 42, ../sass/my-request.scss */ .filter-panel .accordion-content.default { display: block; } /* line 45, ../sass/my-request.scss */ .icon-rotate span { transform: rotate(90deg); transition: .25s; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="accordion" class="filter-panel"> <div class="accordion-header">Refine by:</div> <div class="accordion-toggle-first">All</div> <h4 class="accordion-toggle">Active <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4> <div class="accordion-content default"> <ul> <li> <div class="align-left">Pending DSL (12)</div> <div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div> <div class="clear"></div> </li> <li> <div class="align-left">Pending ECR (21)</div> <div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div> <div class="clear"></div> </li> <li> <div class="align-left">Pending OSI (10)</div> <div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div> <div class="clear"></div> </li> <li> <div class="align-left">Pending OWS (6)</div> <div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div> <div class="clear"></div> </li> <li> <div class="align-left">Pending Requestor (10)</div> <div class="align-right"><span class="text-right"><input type="checkbox" value=""></span></div> <div class="clear"></div> </li> </ul> </div> <h4 class="accordion-toggle">Closed <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4> <div class="accordion-content"> <ul> <li>Cancelled (21)</li> <li>Rejected (14)</li> <li>Completed (21)</li> </ul> </div> <h4 class="accordion-toggle">Type <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4> <div class="accordion-content"> <ul> <li>Alias (13)</li> <li>Sites (15)</li> <li>Domain (19)</li> <li>Social Media (9)</li> <li>Archive/Back-up (21)</li> <li>Mobile App (6)</li> </ul> </div> <h4 class="accordion-toggle">VPU <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4> <div class="accordion-content"> <ul> <li>Africa (23)</li> <li>East Asia Pacific (15)</li> <li>South Asia (19)</li> <li>Latin America (9)</li> </ul> </div> <h4 class="accordion-toggle">Date <span class="align-right fa fa-angle-down fa-lg" aria-hidden="true"></span></h4> <div class="accordion-content"> &nbsp; </div> </div> 

I am using the following script http://uniondesign.ca/wp-content/uploads/2012/09/accordion-demo.html and adding arrow icon if any accordion is open n changing based on accordion open n close but I am stuck once all the accordion is closed my icon is not rotating.

Also attached the screenshot for more details

Error Screenshot

Answer 1

I think you could use toggleClass in this situation. Here is what I changed to get the demo to work.

$(document).ready(function($) {
$('#accordion').find('.accordion-toggle').addClass('icon-rotate');
$('#accordion').find('.accordion-content.default').prev('h4').removeClass('icon-rotate');
$('#accordion').find('.accordion-toggle').click(function(e) {
    $(this).toggleClass('icon-rotate').next().slideToggle().addClass('expanded');
    $(".accordion-content").not($(this).next()).slideUp().removeClass('expanded').prev('h4').addClass('icon-rotate');
});

});

Fiddle