[Support request] How to add an accordion

Home Forums Support How to add an accordion

This topic contains 17 replies, has 3 voices, and was last updated by  David 9 months ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
  • #722884


    Hello Tom,

    I am trying to add an accordion from here https://www.w3schools.com/howto/howto_js_accordion.asp. I have added a script in the wp_footer hook, but accordion does not work. Where is the problem? I ‘ve done every step from html, css to JS like w3school.

    And, how to make one panel close automatically when another panel is clicked?

    Can you help me? A link to the website is in the attachment, accordion at (home page / generate section 1).


    UPDATE: Resolved

    Tom, i have found on forum similar topic and i created an accordion with http://uniondesign.ca/simple-accordion-without-jquery-ui/ and it works!

    But, i have two things in mind. First, when i click the accordion (number 3 “estetska stomatologija” – you will see on the link) the content goes above the second section, i want to accordion move the rest of the page down. Second, i want to make + sign to – sign when the accordion is active. How to make that?

    Thank in advance.

    Best regards,

    GeneratePress 2.1.4
    GP Premium 1.7.3

    David Customer Support

    Hi there,

    so for the toggle, update you JS to this:

    <script type="text/javascript">
      jQuery(document).ready(function($) {
          //Expand or collapse this panel
          //Hide the other panels
          //Switch toggle

    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


    David Customer Support

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



    Ok, i do that. What next?


    David Customer Support

    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. :/


    David Customer Support

    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ฤ‡


    David Customer Support

    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.





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


    David Customer Support

    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.



    Accordion problem on Iphone 6/7/8 on Inspect element

    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. ๐Ÿ™‚

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.