[Support request] How to add an accordion

[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

[David]

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

[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

[David]

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

[Nikola]

Ok, i do that. What next?

[David]

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.

[Nikola]

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

[David]

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

[Nikola]

Yea, that’s work! Thank you David. 🙂

Best regards,
Nikola Kalinović

[David]

Awesome 🙂 Glad i could be of help.

[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

[David]

David,

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

[David]

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.

[Nikola]

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

[Nikola]

David, i have solved the problem. Thanks. 🙂

[Author]

Posts