DEV Community

Discussion on: How to build an HTML-only accordion — no JavaScript required!

Collapse
 
khatrinitesh profile image
Nitesh Khatri

What about how to do design?

Collapse
 
whitep4nth3r profile image
Salma Alam-Naylor • Edited

This solution works as intended without any extra CSS, but the design is totally up to you. Add classes to the elements and style it up! If you’re curious about how I did it, I provided the link to the source code.

Collapse
 
khatrinitesh profile image
Nitesh Khatri

mean - it is possible it will be use inline style in HTML file, right?

Thread Thread
 
whitep4nth3r profile image
Salma Alam-Naylor

Yes, you can do it however you like.

Thread Thread
 
khatrinitesh profile image
Nitesh Khatri

okay, I will try my best level for sure. :-)

Thread Thread
 
link2twenty profile image
Andrew Bone

I did a post a few years ago and go into a little detail about styling, if you're interested.

Collapse
 
mrakcw profile image
MrakCw Dev

Easy, look at this example
codepen.io/MrakCw/pen/mdWBWjb

String in summary it can be like a link, well, you can just open it without a link)

Collapse
 
msarisjulis profile image
msarisjulis

Hello!
I have modified it a little to highlight it:

<details>
    <summary><h1><span style="color: #333399; background-color: #ffffff;"><strong>DETALLE DE CONTENIDOS:</strong></span></h1></summary>
<p>
   CONTENIDO CONTENIDO CONTENIDO
</p>
</details>
Enter fullscreen mode Exit fullscreen mode

Some comments have been hidden by the post's author - find out more