The Soc Accordion is a basic accordion built upon Bootstrap. In short it is nothing more than a collection of divs containing the panel class within a soc-accordion div. A panel contains a panel-heading and a panel-body, see the emmet for more details about this structure.

An important thing to notice is that when it is used without a javascript framework like Angular, the data-* attributes are required on the header to make the accordion interactive. The following attributes are required:

  • data-toggle="collapse"
  • data-parent="#id" => points to the id of the soc-accordion, required for closing other panels when opening this one
  • data-target"#id" => points to the id of the panel which should collapse

Panel 1

Panel 2

Panel 3

emmet:
.soc-accordion#accordion>(.panel>.panel-heading>h4.panel-title[data-toggle="collapse" data-target="#panel$" data-parent="#accordion"]{Panel Title $}^div.collapse#panel$>div.panel-body>p)*3