Accordion Bug

[Richard]

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

[Brant]

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

[Richard]

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

[Brant]

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!

[Richard]

Dear @Brant

The Website looks Great! :)

Good to see that it worked out and as always thank you for using Lay Theme.

Best wishes
Richard

[egorkraft]

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.

[Richard]

Dear @egorkraft

Could you post a link to your website and the Accordion in question, then i can take a better look :)

Best
Richard

[egorkraft]

Hi @Richard-Keith. Thanks for a prompt reply.
You can find it here http://egorkraft.art/cas

Please don't mind the website being a mess atm :)

[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

[egorkraft]

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

[egorkraft]

@Richard-Keith Hi again. I’m kindly pinging you to get back to me. Thanks in advance

[Richard]

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

[egorkraft]

@Richard-Keith Hi Richard, I tried what you suggested. but unfortunately it didn't do it.
I PM'ed my login details to you in case you could have a look some time soon ( :

[Richard]

Dear @egorkraft

Cool will take a look :)

Best
Richard

[FW]

Any solution there? I do have the same problems as egorkraft!
Many thanks in advance.

[Richard]

Dear @FW

Could you please link to your website with the Accordion on question, it could well be that the Accordion hasn't been given any dimensions yet with CSS - will have to see

Best
Richard

[Suzanne]

Hi! I'm having the same problem here with the code provided by @Richard. The accordion is only working in right way if you use it in the bottom page html. If you use it inside the composer with "+ html" the accordion buttons appear but nothing happens when you click them.

Adding a a height property in CSS to the panel doesn't seem to work either.

[Richard]

Dear @Suzanne

Could you please post a link to your website with the Accordion?

I can have a better look - Likely the Accordion contents need a height set with CSS.

In @egorkraft 's case:

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.

Set Height:

.panel {

  height:50px;
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

Talk soon & have a wonderful day :)

Sincerely
Richard

[Suzanne]

Thanks @Richard, it's finally working! Besides adding a height property to "panel" I just had to add to the paragraph a class like "_Quote". Without a class the "<p>Lorem ipsum...</p>" wasn't working, so adding it makes it work even as in the bottom:

<p class="_Quote">Lorem ipsum...</p>

[Richard]

Dear @Suzanne

Glad to hear it works, thank you for the update :)

Best wishes
Richard