mixin m-revealer(heading)
	.m-revealer&attributes(attributes)
		.m-revealer__trigger
			h2.m-revealer__heading= heading
			.m-revealer__icon
		.m-revealer__content
			if block
				block
			else
				p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quippe: habes enim a rhetoribus; Istam voluptatem perpetuam quis potest praestare sapienti? Non enim solum Torquatus dixit quid sentiret, sed etiam cur. Expressa vero in iis aetatibus, quae iam confirmatae sunt. Tamen a proposito, inquam, aberramus. Sed tu istuc dixti bene Latine, parum plane. Duo Reges: constructio interrete. Bonum liberi: misera orbitas. Ut aliquid scire se gaudeant? Quae cum magnifice primo dici viderentur, considerata minus probabantur.

.o-accordion
	- var headings = ['One', 'Two', 'Three'];
	each heading in headings
		+m-revealer(heading)(class="o-accordion__section")
View Compiled
/* o-accordion component file */
.o-accordion {
	border-top: 1px solid #000;
	max-width: 600px;
	margin: 0 auto;

	&__section {
		border: 1px solid #000;
		border-top: 0;
	}
}

/* m-revealer component file */
.m-revealer {
	&__trigger {
		display: grid;
		grid-template-columns: 1fr 50px;

		&:hover {
			cursor: pointer;
			background: lightgrey;
		}

		.-open & {
			background: #000;
			color: #fff;

			&:hover {
				background: #1D1F20;
			}
		}
	}

	&__heading {
		margin: 0;
		padding: 10px 20px;
	}
	
	&__icon {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;

		&::before {
			content: '';
			display: block;
			height: 0;
			width: 0;
			border-top: 10px solid #000;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;

			.-open & {
				transform: rotate(180deg);
				border-top-color: #fff;	
			}
		}
	}
	
	&__content {
		border-top: 1px solid #000;
		padding: 10px 20px;
		display: none;
		
		.-open & {
			display: block;
		}
	}
}

/* resets file */
*, *::before, *::after {
	box-sizing: border-box;
}
class revealer {
	constructor(el){
		Object.assign(this, {
			$wrapper: el,
			isOpen: false,
		});
		this.$trigger = this.$wrapper.querySelector('.m-revealer__trigger');
		this.$trigger.onclick = ()=> this.toggle();
	}
	
	toggle(){
		if (this.isOpen) {
			this.close();
		} else {
			this.open();
		}
	}

	open(){
		this.$wrapper.classList.add(`-open`);
		this.isOpen = true;
	}

	close(){
		this.$wrapper.classList.remove(`-open`);
		this.isOpen = false;
	}
}

document.querySelectorAll('.m-revealer').forEach(el => {
	new revealer(el);
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.