Accordion Bug

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 ?
Screen Shot 2020-09-29 at 11.05.02 AM.png
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:

Screen Shot 2020-10-09 at 2.54.28 PM.png

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:

Screen Shot 2020-10-09 at 2.54.28 PM.png

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

kalamakumaran

I found a solution how to implement the accordion using the same code snipped as provided above but in laygridder.

CSS:

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #2d2d2d;
  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: transparent;
  max-height: 100px;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: #2d2d2d;
  max-height: 0;
  overflow: hidden;
  transition: 0.2s ease-out;
  border-top: 1px solid grey;
}

jQuery:

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

And then just add the "accordion" class to the first row and the "panel" class to the second row and so on...

Could maybe help when you are setting it up for clients because it's easier like that and they can edit their content directly in laygridder.

Lay Theme Forum

Accordion Bug

Dear @Suzanne

Before you post:

When you post:

Online Users