Close

Colourful accordion using HTML and CSS only

This is a simple snippet using HTML tags. Though it looks like an accordion it is much more. It is a plain HTML details tag which specifies the additional details that the user can use and hide on demand. Unlink accordion, it is not collapsible unless it is clicked. This snippet can be used on any website to show the small amount of information for a particular section. Take a look at CSS, each tag is styled. The hovering function is used for the summary, once you hover the mouse on summary the styling is set for the borders of summary tag, along with the colours set for the details and summary in open state. The styling would enhance these simple tags and gives it look as collapsible or accordion. This can be used in your website easily to enhance your paragraphs.

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.