Accordion

A simple accordion. The items inside it can be configured to be togglable, or static.

Dynamic accordion

Toggle source (Jade)
.row
	+accordion().col-12.lg-3
		+accordion-item()
			+accordion-title()#first-title
				span
					| Accordion title
				+accordion-count()
					| 89
				+accordion-icon()
					.on-sm-inline
						+icon('sm', 'add').is-inline.on-closed
						+icon('sm', 'minus').is-inline.on-open
					+icon('lg' , 'arrow-d').on-lg-inline
			+accordion-content()
				+field()
					+input('long', 'dong')(placeholder='Name')
					+input('hi', 'ho')(placeholder='E-mail')
		+accordion-item()
			+accordion-title()#second-title
				span
					| Title goes here
				+accordion-count()
					| 667
				+accordion-icon()
					.on-sm-inline
						+icon('sm', 'add').is-inline.on-closed
						+icon('sm', 'minus').is-inline.on-open
					+icon('lg' , 'arrow-d').on-lg-inline
			+accordion-summary()
				| Some sort of optional summary
			+accordion-content()
				+field('list')
					+label()
						+checkbox('fruits[]', 'banana')
						| Banana
					+label()
						+checkbox('fruits[]', 'apple')
						| Apple

Static accordion

Toggle source (Jade)
.row
	+accordion().col-12.lg-3
		+accordion-item('static')
			+accordion-title()#first-title
				span
					| Accordion title
				+accordion-count()
					| 78
			+accordion-content()
				+field()
					+input('long', 'dong')(placeholder='Name')
					+input('hi', 'ho')(placeholder='E-mail')
		+accordion-item('static')
			+accordion-title()#first-title
				span
					| Some title goes here
				+accordion-count()
					| 62
			+accordion-content()
				+field('list')
					+label()
						+checkbox('fruits[]', 'banana')
						| Banana
					+label()
						+checkbox('fruits[]', 'apple')
						| Apple