Collapsible Sections (JS, SCSS)

In this example below you will see how to do a Collapsible Sections (JS, SCSS) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by StevenVentimiglia, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright StevenVentimiglia ©
  • HTML
  • CSS
  • JavaScript
    <div id="mainContainer">
	<div class="wrapper">
		<div class="page">
			<div class="content">
				<div class="section">
					<ul>
						<li>List Item 001</li>
						<li>List Item 002</li>
						<li>List Item 003</li>
						<li>List Item 004</li>
						<li>List Item 005</li>
						<li>List Item 006</li>
						<li>List Item 007</li>
						<li>List Item 008</li>
						<li>List Item 009</li>
						<li>List Item 010</li>
						<li>List Item 011</li>
						<li>List Item 012</li>
					</ul>
				</div>
				<div class="section">
					<ul>
						<li>List Item 013</li>
						<li>List Item 014</li>
						<li>List Item 015</li>
						<li>List Item 016</li>
						<li>List Item 017</li>
						<li>List Item 018</li>
						<li>List Item 019</li>
						<li>List Item 020</li>
						<li>List Item 021</li>
						<li>List Item 022</li>
						<li>List Item 023</li>
						<li>List Item 024</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>	

/*Downloaded from https://www.codeseek.co/StevenVentimiglia/collapsible-sections-js-scss-BxGmaV */
    // Sass
$space: 20px;
$color: #000;
$light: lighter($color, 50%);
$darker: darker($color, 50%);
// General
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
	color: #333;
	font-size: 14px;
	line-height: 1.25;
	font-family: Arial, Helvetica, sans-serif;
	background: #666;
	min-width: 320px;
	overflow-x: hidden;
}
#mainContainer {
	padding: $space;
}
.wrapper {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
}
.page {
	min-height: $space*20;
}
.content {
	padding: $space;
}
.group {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Pen
.section {
	display: block;
	position: relative;
	max-height: 9999em;
	padding: $space/2;
	padding-top: $space*2.5;
	margin-bottom: $space;
	background: #eee;
	border-radius: $space/4;
	box-shadow: 0 3px 0 rgba(0,0,0,0.15);
	transition: max-height 1s ease-in-out;
	overflow: hidden;
	user-select: none;
	&::before {
		content: 'Section One';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		color: #ccc;
		font-size: 1.25em;
		text-shadow: 0 2px 0 #000;
		background: #333;
		padding: $space/2;
		box-shadow: 0 2px 0 rgba(0,0,0,0.15);
		cursor: pointer;
	}
	&:nth-child(2)::before {
		content: 'Section Two';
	}
	&:last-child {
		margin: 0;
	}
	&.hide {
		max-height: 0;
		padding-top: $space*1.5;
		transition: padding-top 0.1s ease-in;
	}
	ul {
		padding: 0;
		margin: 0;
		li {
			position: relative;
			color: #888;
			line-height: 1;
			padding: $space/2;
			border-bottom: 1px solid #ddd;
			cursor: pointer;
			&:hover {
				color: #333;
				&::before {
					content: '';
					position: absolute;
					top: 50%;
					left: -$space/2;
					transform: translateY(-50%);
					width: 0;
					height: 0;
					border-top: 10px solid transparent;
					border-bottom: 10px solid transparent;
					border-left: 10px solid #ccc;
				}
			}
			&:last-child {
				border: none;
			}
		}
	}
}


/*Downloaded from https://www.codeseek.co/StevenVentimiglia/collapsible-sections-js-scss-BxGmaV */
    const section = document.querySelectorAll('.section');

section.forEach( (el) => {
	el.addEventListener('click', (e) => {
		if (e.target.tagName !== "UL" && e.target.tagName !== "LI") {
			if (el.classList.contains('hide')) {
				el.classList.remove('hide');
			} else {
				el.classList.add('hide');
			}
		}
	});
});

Comments