DEV Community: Michael

Pure HTML Accordion

Michael — Tue, 25 Aug 2020 10:32:25 +0000

Accordions

In the past when building accordion components, I'll usually reach for Bootstrap's accordion implementation. Most of the projects I work on use Bootstrap so it's always seemed like the obvious choice. It's a wee bit complicated though.



<p>
  <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Click me please!
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div>
    Ooh, you clicked!
  </div>
</div>

You need a lot of attributes to make it work, and it's easy to forget them or mismatch the id and the href. The type of problem that's sitting right in front of you but for some reason takes you absolutely ages to see.

Details Element

We've now been saved from having to use tons of attributes and ids/hrefs to make our accordions work, thanks to the <detail> element!

I'm not sure how long it's been around, but a colleague has just shown it to me and it's magical. It works like this.



<details>
    <summary>Accordion title</summary>
    Content you want to show/hide.
</details>

It starts with a <detail> element, which has a <summary> element nested within it, as well as whatever content you want to show/hide. Whatever is inside the <summary> element shows as the accordion title, and anything else is shown/hidden when the title is clicked. You'll probably want to do some styling, but the opening/closing is all handled for you.

Events

Another cool feature of this element is that is supports the toggle event whenever the element is opened or closed. Perhaps you'd like to show a cool animation? The world is your oyster!

Example

I've put together a very basic example here.

Support

The Detail element currently has around 95% browser support, with only IE11 being the only major browser not supporting it. More detailed information on the level of support can be found here.

The Basics of HTML

Michael — Sat, 22 Aug 2020 20:33:41 +0000

What is HTML

HTML is the very first building block of developing websites. It describes to a browser what content to display on a web page, and in a basic way, how that content should be displayed.

HTML is made up of elements. An element consists of an opening tag and a closing tag. A tag consists of the name of the element between two angle brackets, with a backslash to indicate if it is a closing tag. Any text between the tags is what is displayed on the page, with the tag indicating what element it is and how it should be displayed.

HTML Elements

<h1>Hello World</h1>

The above example shows a typical HTML element. It starts with an opening tag, the text we want to display, and then a closing tag. We can see that the closing tag is identical to the opening tag, but the name of the element is preceded by a backslash. MDN has a very good image depicting the anatomy of a HTML element here.

The content between the tags can also encompass other HTML elements. This is called nesting and is generally how HTML pages are built. Elements can be nested inside other elements to create the page layout that you desire.

Element Examples

<div> - used to group elements together
<p> - used to display a paragraph
<img> - used to display an image
<a> - used to link to another website or to a particular part of the page
<h1> through <h6> - used to display a header element, with h1 being the biggest through to h6 being the smallest

Attributes

<h1 class="header-text">Hello World</h1>

HTML elements can have extra pieces of information added into them in the form of an attribute. They are inserted into the opening tag and follow the format attribute="value" which can be seen above inside a full element. There are many different types of attributes, some of which are used behind the scenes in CSS or Javascript and some of which are used to tell the element something that it should be doing.

Attribute Examples

class - used to target the element through CSS or Javascript along with all other elements that have the same class value
id - used to target the element through CSS or Javascript or used to link to this part of the page with an anchor <a> element
href - used to provide an anchor element with the link that it should go to
src - used to provide a link to the image that an <img> element should display

Nesting

<html>
   <body>
      <div>
         <h1>Hello World</h1>
         <a href="https://www.google.com>Click me!</a>
      </div>
      <div>
         <h4>Dinosaurs</h4>
         <p>Dinosaurs are great.</p>
      </div>
   </body>
</html>

Above is a typical example of nesting elements within other elements. The top level is an html element which tells the browser that everything between those tags is going to be HTML. Next is a body element which tells the browser to display everything between its tags. (There is also a head element which is where stylesheets and scripts are loaded.) The next level contains two div elements which are being used to group some elements together.

How to stack HTML elements

Michael — Tue, 19 May 2020 15:25:58 +0000

I recently had to build this. It's a button with a separate image behind it, providing a cool background effect to the container the button is in.

At first, I didn't have a clue what to do. I'm familiar with z-index but I'd never used it to stack elements directly on top of each other like that.

After a bit of Googling and speaking to a colleague, here's what I ended up doing.



<div class="container">
   <img class="image" src="">
   <a href="" target="_blank" class="btn">Button</a>
</div>

The container



.container {
  display: flex;
  align-items: center;
  justify-content: center;
  float: left
}

I'm using flexbox here along with align-items: center and justify-content: center so that my image and button are both centred inside the parent container. Depending on your needs this may not be the right solution for you. You can read more on flexbox by following the link at the bottom of the page.

float: left here isn't needed for the actual stacking of elements, but in my case it was needed to ensure that the component is left-aligned relative to some text above it, but also that the image stays centred behind the button.

Image



.image {
    z-index: 1;
    position: absolute;
}

I've given the image z-index: 1 and position: absolute. Absolute positioning essentially pulls the element out of the normal document flow meaning that surrounding elements won't be affected by this element.

The Button



.btn {
    z-index: 2;
}

With z-index: 2, and absolute positioning on the image this means the button is nicely stacked on top of the image.

Wrapping up

These basic properties should give you a button stacked nicely on top of an image. This is because the button is now acting as if the image wasn't even there. So rather than getting positioned next to it, it is now on top of it.

If you'd like to learn more about flexbox, absolute position or relative position then check out these great MDN links.
https://developer.mozilla.org/en-US/docs/Glossary/Flexbox
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning

I'm keen to hear if there are any other ways this could be tackled, or any ways my implementation could be improved. So please leave a comment!