This is a plain yet elegant example of an Accordion with the items arranged in the ordered list. You can use this to show a large amount of information or data in an ordered manner. This can be seen in the pages where the content is broken in paragraphs, links, and images. You can create this using plain HTML with bootstrap and CSS styles. You can click on one of the panels and you would see the collapsible feature working on this accordion. This snippet uses the “Collapsible panel” one of the feature of bootstrap. You need to define the “panel-group” which is divided default-panel each having header, footer, and body. Check out the classes data-toggle assigned as “collapse”. This gives the collapsing functionality to the body of according once clicked on the header. The CSS styles the accordion along with the panel.
This is an example of Nested Accordion with verticle steps inside each accordion. Here the panel is created inside the panel to create a nested view. To create this nested view we have a super accordion defined as panel-group and then the panels containing the header and body for each accordion. Now each of these panel-body defines a new panel which would create a new group of the accordion. The data-toggle is set to collapse to give a collapsible behavior to each accordion. The innermost body contains some listed information; You would rarely see, but this could be useful in website for educational to display large content or on the sites which deals with different variety yet categories under one particular menu. You can use this on your website.
This has a beautiful simple accordion example. Unlike other examples where panel-group was used, this uses the card with each card acting as an accordion. This contains the card header and card body. Take a look at the class used for header and body they define the collapsible feature. By default the first card is expanded, where are others are made false. The card-body is just defining the matter which would be displayed in the accordion. The accordion container is used to hold these set of cards, whose titles are visible but only one pane is visible at a time. The CSS styling has added extra look and transitions for this Accordion. This snippet is responsive and changes to the look to fit the screen size. You can easily use this sample to add a stylish look to your page.
This is the best example of the accordion used for FAQ. This snippet can be directly used in the web page or application viewed on any device. The HTML page uses a container-fluid which gives a responsive behavior. The header contains the brand name, sign in and registration button. If you see the header while loading the page, you would see the animation effect assigned to the element of the header. The main body contains the accordion mentioning the FAQ. The jQuery accordion is set to a div giving an accordion behavior. Do include the animation.css to have the animations effect set on the div. Animations like flipInY, FlipInX are created using animation.css. The CSS styling is the right fit for this snippet. You can use this snippet for SPA websites.
An example of the Accordion with the dropdown on mouse hover. HTML is a simple and plain page with the headers and paragraphs used in div. The styling is perfectly matching the HTML content. The behavior of accordion is given by the jquery, take a look at jquery script where the accordion is set to a specific div at mouse hover event. The properties like active, auto-height, navigation and collapsible behavior are added at mouse hover event. The CSS styling takes care of the accordion with”:: before” and “:: after” selectors. This is an excellent example of large content. You can use this in your page for the FAQ’s or large content to be displayed with a slight animation effect. Use this snippet for a simple yet elegant look for your web page.