Accordion Bug

egorkraft · B Brant Sep 10, 2020, 2:30 PM

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 · Sep 28, 2020, 5:20 AM

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 · wrote on Sep 28, 2020, 9:57 AM

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 · Sep 29, 2020, 12:02 PM

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 · Sep 29, 2020, 8:03 AM

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 · wrote on Oct 1, 2020, 10:57 AM

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

Richard · Mar 24, 2021, 3:39 AM

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 · R Richard Oct 9, 2020, 12:56 PM

@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 · wrote on Oct 12, 2020, 7:47 AM

Dear @egorkraft

Cool will take a look :)

Best
Richard

FW · wrote on Jan 27, 2021, 11:39 PM

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

Richard · wrote on Feb 2, 2021, 4:35 AM

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 · wrote on Mar 20, 2021, 12:13 PM

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 · Apr 3, 2021, 7:19 PM

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 · Apr 8, 2021, 3:09 AM

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 · wrote on Apr 8, 2021, 3:09 AM

Dear @Suzanne

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

Best wishes
Richard

kalamakumaran · Apr 23, 2021, 9:36 AM

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.

doorofperception · wrote on Jun 16, 2021, 12:41 PM

Thank you very much to all people in this thread.
I can't believe I managed to set up my accordion almost perfectly (although I'm not understanding much CSS and no jQuery at all).

You can see it here: https://practice.de/faq-2/

Just one last thing I can't seem to get right:

The text inside the panels needs space to the top and the bottom, but doing it with padding affects also the closed panels. How do I do that correctly?

Besides, I would like the button to change to grey only on hover, but get back to white when the panel is active. How can I achieve that?

All the best — BEN

Remco van Dun · wrote on Jul 11, 2021, 9:59 AM

@doorofperception

I wasn't able to get it working with your code above, but for me it was possible to change the spaces by changing the row gutter inside gridder to a smaller size.

Also for others that weren't able to figure it out or like this method better. I found this very easy to apply.

You set a panelbutton class to the text of your accordeon title and a panel class to the row underneath you like to expand. If you accidentally set the panel class to a text instead of the row it will give you an ease in animation for that text, but also makes your margins bigger ( not sure why but if you like it, use it?)

If you find the content is too big for the accordeon, you can change the panel.style.maxHeight, but making it bigger makes the ease animation more choppy so maybe move some numbers around.

Like mentioned above you can change the % margins in the gridder.

Custom CSS:

</script>
.panelbutton
{
    border-top: 1px solid grey;
    cursor:pointer;
}

.panel {
  padding: 0 20px;
  overflow: hidden;
  transition: 0.2s ease-out;
}

Custom HTML at bottom:

</script>

 var toggleStates = [];
    var buttons = document.getElementsByClassName("panelbutton");
    var panels = document.getElementsByClassName("panel");
    
    function ApplyButtonState(index)
    {
        var panel = panels[index];
        
        if (toggleStates[index])
        {
            panel.style.maxHeight = '200px';
            panel.style.margin = null;
        }
        else
        {
            panel.style.maxHeight = 0;
            panel.style.margin = 0;
        }
    }

        
    if (buttons.length != panels.length)
    {
        console.error('panelbutton and panel count mismatch!');
    }
    else
    {
        for (var i = 0; i < buttons.length; i++) {
     
            var button = buttons[i];
            toggleStates.push(false);
            
            ApplyButtonState(i);
                
            button.toggleStateIndex = i;
            button.addEventListener("click", function(evt) {
                    
            
                for (var j = 0; j < toggleStates.length; j++)
                {
                    var toggleStateIndex = evt.currentTarget.toggleStateIndex;
                    
                    var foldedOut = toggleStateIndex === j;
                    if (foldedOut && toggleStates[j])
                        foldedOut = false;
               
                    toggleStates[j] = foldedOut;
                    ApplyButtonState(j);
                }
         
            });
        }
    }
  

</script>

curious to hear what you think. You can find an example on https://remcovandun.nl/home/accordeon/

Richard · wrote on Jul 13, 2021, 8:13 AM

Thanks for the update @Remco-van-Dun 💥

Alice.guarnieri · wrote on Dec 10, 2021, 6:15 PM

Hi!

I was wondering if it would be possible to merge the accordion function with this code.
I would like to be able to insert multiple "read more" buttons on the same page that become "read less" as the content expands, and also expand more content leaving them visible.
This is my test https://www.aliceguarnieri.eu/test-yeah/

Thank you!
Alice

Lay Theme Forum

Accordion Bug

Dear @Suzanne

Thanks for the update @Remco-van-Dun 💥

Before you post:

When you post:

Online Users