[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
    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.

    #731040

    Nikola

    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

    #731108

    David

    David,

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

    #731174

    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.

    #732232

    Nikola

    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).

    #732248

    Nikola

    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.