This is an example of the simple default collapsible feature and material design accordion using bootstrap. Though the HTML design is the same, the behavior changes due to the bootstrap material design accordion class. Click on the simple collapsible feature to see the content. This feature displays the collapsible behavior by click on it once again. Check out the material design bootstrap accordion behavior, once you click on any of the accordions there is a smooth transition from previous open accordion to the opening of click accordion. This transition is due to bootstrap designs. The styling for both the designs is different for both examples. Check out the javascript which adds and removes the active class for the clicked accordions. Use this snippet’s for your websites especially for menus or list items. Tweak the styling to blend it with your website.

This is an elegant looking accordion, with HTML and CSS style. The HTML is simple with the container having panel-group with the heading, title body defined for accordion. The data-toggle and accordion-toggle define the behavior of the accordion once clicked on it. The collapse class indicates it has a collapsible behavior for each panel. The .in is added to the first panel for the collapsible class which indicates the data to be shown by default. The first panel is shown by default and is in the expandable state. An accordion is used to show the extra information or paragraph with images and links. You can use this styled accordion on your page. The styling and color combination would give and stylish look to your website.

This is an excellent example of the accordion with “expand all and collapse all” button. The HTML is simple with the bootstrap accordion with the panel and data-toggling behavior defined. The CSS defined the styles for each tag, check out the “:: after” selector tag, which selects the panel-default and panel-heading and add the given styles after they are selected. Notice the change in the expandable button which is at the right of accordion, once clicked it rotates 180deg, this styling is done using CSS for aria-expended. This indicates the state of the collapsible element. This aria-expanded can be used with menus or list or any other collapsible items. The expand all and collapsible all button work using javascript. Check out the functions which open up all the accordion when clicked on "expand all" and "close all" when clicked on close all accordion. Use this to your website with large content and paragraphs.

Generally, accordions are used with collapsible and toggling behavior. But this example shows you the combination of color schemes such as primary, success, danger, etc. The snippet is using the container for the responsive behavior of this design, the panel-group class is used which includes the panel-heading, panel-title, panel-body. You could also include the panel-footer if needed. The panel-default describes the color scheme for the accordion. Panel container different classes for color such as panel-primary, panel-success, etc. This is defined for each panel in panel-group. Each panel defines the buttons for previous and next accordion to open. Button click functions are taken care of by the javascript file. The CCS just defines the top-margin for the accordion, color scheme and fonts is taken care using the tags used in HTML. You can use these types of the accordion to display some new or important announcements on webpages.

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.

This snippet shows examples of Accordion and toggles using Velocity.js. Velocity.js is an animation engine for the UI, which works with or without JQuery. It is fast it features colour animation, transforms, loops, easings, SVG support, and scrolling. It can be used instead of Jquery and CSS. Here, the snippet deals with bootstrap 3 combined with Velocity.js v1.2. You can see the Accordion and Toggle behaviour created using bootstrap classes. The HTML is similar for both the example, take a look at the CSS and JQuery. Jquery uses the Velocity for creating the animation effect for fading the panels once clicked to see the accordion and toggling behaviour. The animations are smoothly done. This would be used in websites with large content. You can use this code with your personal tweak to blend with your page.

https://codepen.io/tofanelli/pen/waadRY

This is a beautiful yet simple accordion created using Bootstrap 4. Your browser must support ES 6 in order to display this properly. You can see the accordion has a white background around the text. If you closely look at the code you can see, HTML code is simple and repetitive while CSS is very minimal. The biggest challenge is to write JavaScript code properly. One of the most noticeable code segment is the use of async and await. This accordion can be used on any website as a vertical navigation bar. You can expand the accordion by only by clicking the texts such as React. Accordion won’t be expanded if you click outside of the text within an accordion item. With slight modification to javascript, you can customize the accordion to behave in quite different ways.