Skip to content (Press Enter)

Likiipedia

| Digital Notebook

  • Home
  • Blog Posts
  • Code Samples
  • Open Source Team | Invitation
  • Contact Likii ๐Ÿ“ง
html 5 written on a purple background

How to make an accordion without JavaScript

Our HTML5 is full of wonderful surprises, isn’t it? ๐Ÿ˜€ One of them is an accordion you can make – without using JavaScript. In this exercise we’ll go trough everything you’ll need to create one of your own, and don’t worry, it’s dead simple ๐Ÿ˜€

Table of contents:

  • How does it work
  • How to set up details and summary
  • How to style summary and itโ€™s arrow

How does it work?

We’ll set a opening and closing <details> tag wherever we want to create an accordion. This feature is perfect for F.A.Q sections ๐Ÿฅณ

<details> is a wrapper, it holds everything together. Within it we will set our content and <summary> tags as well. After we’ve set our <summary> we can start adding in anything else that we want to add to the body.

<summary> on the other hand has a more important function. It acts as a title, it’s the text that we click on and then everything expands. Summary will have a little arrow next to it which will on click event point downwards.

After setting both of these, we’d want to know if we can style them and the answer is yes we can ๐ŸŽ‰

Let’s get started!

How to set up <details> and <summary>?


 <details>
  <summary> Summary is our title </summary>
  <p> Here we can start adding things that will make the body of our accordion:
  <p> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>

    <ul>
      <li> You can add a List Item  </li>
      <li> And another List Item </li>
      <li> And maybe just one more List Item </li>
    </ul>

    <button> You can add a button  </button>
   
   <sub> *you can add whatever you want ๐Ÿ˜ฎ </sub>
  </details>

Above you can see a simple example of adding a title (or a question if you’re making F.AQs), a couple of paragraphs, a list and a button to our accordion.

Let’s style them up a bit ๐Ÿ˜œ

How to style <summary> and it’s arrow?

  • To style summary on it’s own (doesn’t include the arrow)
summary {
   color: blue;
}
  • To style summary arrow (on it’s own):
summary::-webkit-details-marker {
  color: blue;
}
  • To style summary AND arrow (together):
summary,
summary::-webkit-details-marker {
  color: blue;
  /* remove the outline if you wish */ 
  outline: none;
}

As you can see it’s pretty simple, BUT, it does not work everywhere:

The only browser that doesnโ€™t support this are the Microsoft ones (and Opera Mini which makes senseโ€”it doesnโ€™t really do interactive).

CSS-Tricks

But even then, itโ€™s just like all the sections are opened, so itโ€™s not a huge deal.

CSS-Tricks

If you’d like to see how this looks in practice head over to CodePen:
No JavaScript Accordion | HTML5 by Likii (@likiipedia) on CodePen.

Related Projects

node js written on a grass green background

Module Exports in Node.js | Variables & Functions

August 22, 2020
creating an apple with only css

How to make an apple with only CSS

August 14, 2021
html 5 written on a purple background

How to make an image or a file upload button with HTML5

April 4, 2021

Categories

  • Fundamentals (4)
  • HTML & CSS (1)
  • Junior Developer Group (2)
  • Let's Discuss (3)
  • Tools & Projects (1)
  • Uncategorized (1)
  • Vue.js (3)
  • WooCommerce (1)

Check out my newest Vue project ๐Ÿ’š

a piggy made with css

Contact Likii ๐Ÿ“ง

Hi there! ๐Ÿ‘‹ If you’d like to contact me outside of social media and want to have a chat about projects you’d like to see featured on the blog, collaboration enquiries and anything in between – you can use this form! ๐Ÿ’›

Take me to contact form
Created by Likii.