[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
    Posts
  • #722884

    Nikola

    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,
    Nikola

    GeneratePress 2.1.4
    GP Premium 1.7.3
    #723329

    David Customer Support

    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';
    }
    #723880

    Nikola

    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

    #723951

    David Customer Support

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

    #723985

    Nikola

    Ok, i do that. What next?

    #724076

    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.

    #725098

    Nikola

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

    #725113

    David Customer Support

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

    #725163

    Nikola

    Yea, that’s work! Thank you David. ๐Ÿ™‚

    Best regards,
    Nikola Kalinoviฤ‡

    #725165

    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.