Accordion Bug

Richard

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.

doorofperception

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

@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

Thanks for the update @Remco-van-Dun 💥

Alice.guarnieri

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

Richard

Dear Alice

@Alice-guarnieri

This is quite a long thread now - unsure exactly what "this Code" is - the most recent by @Remco-van-Dun ? 🌝

Nice Test - I see that the "read-more" becomes "read less" on the first accordion, Is this a solution? or the problem is that the second "read-more" is not functioning?

Screen Shot 2021-12-14 at 5.17.02 PM.png

Sorry if i have mis-understood Alice and talk soon, Best wishes! ✨

Richard

Remco van Dun

Nice @Alice-guarnieri,

I see you were able to change it to a button and switch the read more to read less. I'd love to see what you did with the code too. Would be nice to see each accordeon open after the click, I think that is what you want to achieve?

Alice.guarnieri

@Remco-van-Dun said in Accordion Bug:

accordeon

Hi guys,

thank you for your reply!
I did many tests starting from @remcovandun code but I didn't manage to open multiple accordeon in the same page. Could you please give me some advices to achieve this?

Thanks!

Lay Theme Forum

Accordion Bug

Dear @Suzanne

Thanks for the update @Remco-van-Dun 💥

Dear Alice

@Alice-guarnieri

Richard

Before you post:

When you post:

Online Users