HTML-Only Accordion [Article] | Treehouse Blog

Accordions are everywhere in the net and cellular apps. They’re an effective way to indicate and conceal content material based mostly on person interplay and aren’t very onerous to construct however normally require a little bit of HTML, CSS and JavaScript. Do you know you can construct a easy accordion in simply seconds with solely HTML? Comply with alongside as I clarify how you can set this up!

The HTML accordion requires solely two HTML tags to get arrange. <particulars> and <abstract>. The essential code construction would appear to be this:

<particulars>
   <abstract></abstract>
<particulars>

The particulars HTML tag

The <particulars> tag acts as a wrapper for our accordion. All the content material on your accordion should go inside the <particulars> tag.

The abstract HTML tag

The <abstract> tag is normally used on your title. Earlier than the accordion is clicked, that is the content material that’s seen and can all the time stay seen.

Including content material to an accordion

So as to add content material to the accordion when the person clicks it’s fairly easy. Any content material beneath the <abstract> tags can be hidden by default. This content material may very well be something from some paragraph tags, an ordered record, pictures, hyperlinks, you title it. As soon as the person clicks the accordion, this content material can be seen.

Right here is a few fundamental content material:

<particulars>
   <abstract>
      <h1>Todo record:</h1>
   </abstract>
   <p>Examine</p>
   <p>Grocery Store</p>
   <p>Clear The Home</p>
</particulars>

Earlier than the person clicks, that is what the accordion will appear to be:

As soon as the person clicks:

Fairly cool, with just some strains of markup, we constructed a functioning accordion! As you’ll be able to see it’s not the very best wanting accordion on the market. No worries although, we will type it fairly simply!

The right way to Model an HTML Accordion

Styling your accordion may be very a lot as much as you and the way you’d like for it to look, however be happy to comply with alongside as I give just some fundamental stylings to the one we created above.

particulars {
    width: 250px;
    padding: 1rem;
    border-radius: 8px;
    background: white;
    box-shadow: 4px 4px 3px rgba(0,0,0,0.15);
}

To the particulars CSS rule, ive added a set width, some padding, a border-radius, background shade, and a few box-shadow. Subsequent we will type up our <abstract> tag.

abstract {
    cursor: pointer;
}
abstract h1 {
    show: inline;
    margin-left: 1rem;
    font-size: 1.25rem;
}

Very first thing you’ll discover is I gave our abstract a cursor: pointer. That is simply so the accordion seems that it may be clicked to the person.

I then give some fundamental stylings to the h1 component in order that it may well stay on the identical line as our caret that comes with the accordion menu by default. Some margin and a bigger font-size has been added as nicely.

Lastly, we will type the paragraph tags we added by writing the next:

particulars p {
    margin-left: 1.75rem;
    opacity: 0.7;
}

And that’s about it. We now have a a lot cooler wanting accordion!

I hope you loved establishing an accordion with simply HTML with me. Be happy to tell us should you’d prefer to see how you can construct a good nicer accordion with HTML, CSS, and JavaScript subsequent!

Till subsequent time, have enjoyable and glad coding!