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.
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.