[Resolved] How do I add an accordion to Generate Sections?

[Elvin]

Here’s what shows on the front end – https://share.getcloudapp.com/mXurL9GJ

Any chance you can provide us temporary backend access so I can check the page?

[Alan]

Hi Elvin

Its on the bottom of the ceiling fans page

[Alan]

Hi Elvin

I may have almost sorted it out. I found a way to do it using css and html alone. No Javascript at all.

Gold Coast Ceiling Fan Installations

I found the code here

Accordion

Are you able to tell me how to make the 3rd dropdown list background appear the lighter colour behind the bullets when its open? I cant work that out. I added this but its not quite right.

ul.details {
    background: #fbfbfb;
    line-height:30px;
    list-style: disc;    
    font-size:1.7rem;
    font-size:17px;
    font-style: italic;
    padding: 1.5rem 1rem;

}

[David]

Hi there,

try this:

ul.details {
    background: #fbfbfb;
    line-height: 30px;
    list-style: disc;
    font-size: 1.7rem;
    font-size: 17px;
    font-style: italic;
    margin-left: 0;
    padding: 1.5rem 2.5rem;
}

[Alan]

Thanks David.

I will give that a try.

In your opinion is this version of an accordion that doesn’t include any JavaScript better than one that does include JavaScript?

Is it more lightweight and are there negative implications in doing it this way?

Thanks,

Alan

[David]

using the <details> HTML Element is the most performant way of adding accordions. Its browser native, and requires no JS to be loaded.

[Alan]

Thanks David.

That’s what I was hoping!

[David]

Glad we could be of help.

[Alan]

I think I might have got it all sorted out now. Thanks a lot for all of the great support from everyone 🙂

Gold Coast Electrician – Ceiling Fan Installations

[David]

Looks great!

[Alan]

Thanks again for the help !

[Author]

Posts