Using proper code accordions can greatly simplify and magnify coding

If you are a web developer looking for an incredibly easy way to create an accordion, you are in luck. The trick to accomplishing this is to use the and HTML tags.

If you simply place text place between the opening and closing tags, a "Details" link will display on the page, along with a small arrow pointing next to it. Whenever a user clicks on the "Details" link, it will then expand and display the text you placed between the two tags.

If you want something more interesting than a "Details" link, this is simple, too. You use a tag within the tag. The text you place between the opening and the closing tags will then display instead of "Details".

These two tags make it simple to create an aesthetically pleasing FAQ page or section. There are limitless other uses for it as well.

What's more, you can style the tag anyway you want. For example, you can change the default focus ring by using header elements for each section that will expand. You can even change the styling of the little arrow beside the "Details" link. For non-Blink-based browsers, you do this through list-style properties. For Blink-based browsers, you have to do this through a proprietary method. Of course, both methods can be combined. For example, if you want to replace the little arrow with an image of a different arrow, you could use the following code:

summary {
  list-style-image: url(right-arrow.svg);
}

summary::-webkit-details-marker {
  background: url(right-arrow.svg);
  color: transparent;
}

Unfortunately, if you change the default arrow, you cannot easily get the arrow to turn down when the user clicks the link. But this should not be a show stopper.

Just keep in mind that, at the moment, neither Microsoft Edge nor Explorer support either the or tags. Opera Mini does not support them as well. These browsers will simply display the text between the tags, so it is no great tragedy.

In conclusion, using the or tags is an unbelievably easy way to create an accordion in most browsers. A dynamic and attractive FAQ section is just a few lines of code away.For more information click here https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/.