How to add an accordion

Hi there,

so for the toggle, update you JS to this:

<script type="text/javascript">
  jQuery(document).ready(function($) {
    $('#accordion').find('.accordion-toggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');
      
      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('fast');
      
      //Switch toggle
      $('.accordion-toggle.toggle-open').not(this).removeClass('toggle-open');
      $(this).toggleClass('toggle-open');
    });
  });
</script>

This adds the toggle-open class to the element when it is clicked. So you need to give your first H4 heading that class e.g

<h4 class="accordion-toggle toggle-open">Accordion 1</h4>

Then this CSS to switch the unicode character to a minus.

.accordion-toggle.toggle-open:after {
	content: '\02796';
}

Hello David,

Yes, that makes the + sign to - sign when the same accordion is clicked, and reverse. But if you click the first accordion, and then you click another accordion the first accordion is not going back to + sign. How to make that happen? :)

Thank you for the support.

Best regards
Nikola

can you remove the toggle-open class from that first line of the HTML.

Ok, i do that. What next?

Did you add the toggle-open class to all the H3 headings? If so remove all of them please. And it looks like you have the CSS for the .accordion-toggle:after and the .accordion-toggle.toggle-open:after content the wrong way round. Ie. the unicodes need switching.

Now, the toggle-open is only on first h3 heading, and the unicodes are switched. Again is not working as it should. :/

I have edited the code here - you need to remove all toggle-open classes from your markup

Yea, that's work! Thank you David. :)

Best regards,
Nikola Kalinović

Awesome :) Glad i could be of help.

Hello David,

One more thing.

I have a problem with the mobile version because the heading is going over the plus sign. You can see that on the bottom of the page, where is the FAQ section Link. I tried to add margins or paddings on the h3 and also on :after but it did not work.

Also, on mobile, Android (google chrome) change the color of the plus and minus sign to the orange and blue, i don't use that colors, i tried with !important but nothing happens.

Thanks in advance.

Best,
Nikola

David,

I use "Responsive Accordion" for my website. It works very well and you can view what I have working here

Hi there,

i only have iOS available and the issues are not showing up on that or any responsive test tools. Making it pretty impossible for me to diagnose the issue. I am not sure what to advise.

David, you can see in the picture where is the problem. I took a screenshot on inspect element responsive test on example iPhone 6/7/8, but that problem is on all mobile devices.

H3 heading is going over plus sign (:after element).

David, i have solved the problem. Thanks. :)