[Resolved] How to add an accordion

Home Forums Support How to add an accordion

This topic contains 9 replies, has 2 voices, and was last updated by  David 1 day, 2 hours ago.

Viewing 10 posts - 1 through 10 (of 10 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.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.