Accordion Bug
-
@mariusjopen Could you recommend one, i've been searching for hours and nothing seems to work. thanks!
-
Dear @Brant
This is a Basic Accordion that i use sometimes when needed:
jQuery -
jQuery('.accordion-module').find('.accordion-title').click(function(){ jQuery(this).next().slideToggle(); jQuery(this).toggleClass("accordeon-active"); jQuery(".accordion-module .accordion-content").not(jQuery(this).next()).slideUp(); });
Basic HTML - to understand what the jQuery is referring to/ activating -
<section class="accordion-module"> <div class="accordion-box"> <div class="accordion-title"> </div> <div class="accordion-content"> </div> </div> </section>
And the CSS -
.accordion-module{ .accordion-box{ .accordion-title{ } .accordion-content { display:none; } } }
Good Luck and thank you for using Lay Theme
Best
Richard -
Hi @Richard-Keith, I had to try another way and used this very simple tutorial here: (https://www.w3schools.com/howto/howto_js_accordion.asp).
I got as far as that I can trigger the accordion animation, but it somehow wont slide down. Maybe you know what I've been missing?
thanks so much!
-
Dear @Brant
I have used the example you provided:
https://www.w3schools.com/howto/howto_js_accordion.asp& this works for me, Did you remember to wrap your Javascript in a "Newpage Event"?
https://laytheme.com/documentation.html#custom-javascript
Custom CSS:
/* Style the buttons that are used to open and close the accordion panel */ .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ .active, .accordion:hover { background-color: #ccc; } /* Style the accordion panel. Note: hidden by default */ .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
Custom HTML:
<button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum...</p> </div>
Custom JS - Note how the script in wrapped in a Newpage Event :)
<script> window.laytheme.on("newpageshown", function(layoutObj, type, obj){ if(type == "category" && obj.id == 1){ var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } } }); </script>
Hope this helps you @Brant
Best Wishes
Richard -
Hi @Richard-Keith,
i'ts kind of working now, thank you so much for helping me out!if you could just have a final quick look: unfortunately it only works when i put the html code in the section 'Custom HTML at bottom'. But not when i want to place it on the grid via 'add HTML'. How come that makes a difference?
I Hope you can help me once more,
All the best
Norman -
Dear @Brant
If you put the HTML part into "+more - HTML" it will be there but you need to remember to add some CSS to make it visible,
Put some in "+More - HTML" and then send me the link & i can verify that it is indeed there :)Best
Richard -
hi @Richard-Keith,
thanks for your quick response!so what I did now is also added the css into the "+more-HTML'-part and put it into a <style></style>. the accordion was actually already visible before, but unlike the html I placed in the 'Custom HTML at bottom', it is not functional.
I now put two accordions on the site: www.bodyandspace.de (one I added through "+more-HTML" and one I added to the 'Custom HTML at bottom' (this one is working).
thanks
Edit: It seems to work now, I have no idea how, but it works! thanks again richard!
-
Hi @Brant I have exactly the same bug, accordion works ok when added at the 'Custom HTML at bottom' however the content isn't displayed if added through "+more-HTML".
Can you please kindly specify what exactly did you put in <style></style>.
Thanks. -
Dear @egorkraft
Could you post a link to your website and the Accordion in question, then i can take a better look :)
Best
Richard -
Dear @egorkraft
Apologies for the delay:
Im looking into it and we have a max-height of 0 ?
The accordion gets the class "active' so it is triggering,Could you post your HTML along with whatever CSS you are using?
If this doesn't work maybe you could send me a private message with your Login details and I can then take a proper look.
Let me know :)
Best
Richard -
Hi @Richard-Keith,
I'm using just exactly what you have provided above in response to Brant in this chat:
Custom CSS (In Custom CSS & HTML panel)
/* Style the buttons that are used to open and close the accordion panel */ .accordion { background-color: #ffffff; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ .active, .accordion:hover { background-color: #ccc; max-height: 100px; } /* Style the accordion panel. Note: hidden by default */ .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
Custom <head> content
<script> window.laytheme.on("newpageshown", function(layoutObj, type, obj){ if(type == "project, page" && obj.id == 105, 81){ var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } } }); </script>
Custom HTML at bottom
<button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum...</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum...</p> </div>
So as you can see custom HTML at bottom does work ok, however when I add just the same code to gridder via "+more - HTML" it gets the class "active' however max-height is not triggered. I tried adding various CSS properties of (max-height; overflow and display) to it but to no avail.
Thanks,
Best
Egor -
Dear @egorkraft
you must give your '.panel' in CSS a height. the class active is indeed being added to your accordion outer:
But it cannot show anything because it is 0px high.
so something along the lines of
.panel { height:50px; padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
Let me know how this goes! :)
forgive me for the delay.Best wishes, have a wonderful day & thank you for using Lay Theme
Sincerely
Richard -
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options ā Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it