mixin revealer(heading)
	.revealer&attributes(attributes)
		.revealer__trigger
			h2.revealer__heading= heading
			.revealer__icon
		.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.

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

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

/* revealer component file */
.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 {
			&::before {
				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;
}
View Compiled
class revealer {
	constructor(el){
		Object.assign(this, {
			$wrapper: el,
			targets: ['trigger', 'icon', 'content'],
			isOpen: false,
		});
		this.gather_elements();
		this.$trigger.onclick = ()=> this.toggle();
	}

	gather_elements(){
		const keys = this.targets.map(selector => `$${selector}`);
		const elements = this.targets.map(selector => {
			return this.$wrapper.querySelector(`.revealer__${selector}`);
		});
		let elObject = {};
		keys.forEach((key, i) => {
			elObject[key] = elements[i];
		});
		Object.assign(this,	elObject);
	}
	
	toggle(){
		if (this.isOpen) {
			this.close();
		} else {
			this.open();
		}
	}

	open(){
		this.targets.forEach(target => {
			this[`$${target}`].classList.add(`revealer__${target}--open`);
		})
		this.isOpen = true;
	}

	close(){
		this.targets.forEach(target => {
			this[`$${target}`].classList.remove(`revealer__${target}--open`);
		})
		this.isOpen = false;
	}
}

document.querySelectorAll('.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.