Accordion Bug

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

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!

[Remco van Dun]

@Alice-guarnieri said in Accordion Bug:

I'm not sure, but it could help if you post the code of what you did so far?

[Feldes]

Hi.
I started building a website using Laytheme. Unfortunately i'm struggling with the same problem, that is discussed in this thread.
I went with the https://www.w3schools.com/howto/howto_js_accordion.asp - then i tried every option, that is offered here, but the content in the box is still not showing.
@Richard do you have any idea, what is wrong?
You can find the page here https://neu.nenadpopovic.com/projekte/haus-v/
the accordion should be the infobox below the carousel. Thanks in advance:)
Philipp

[Feldes]

This post is deleted!

[Feldes]