JSFiddle - React, Tailwind, and code Playground

by Jake

HTML

<section class="foldaway">
  <div class="foldaway-title">
		<h2>Topic of Something</h2>
		<a class="_icon" title="Expand this section"></a>
  </div>

    <div class="foldaway-content">
<!--       <h1>Something important for sure</h1> -->
      <p>Information that will go inside of this topic of interest. Donec sem elit, rutrum eu sapien sed, finibus convallis turpis. Aenean mattis tincidunt orci vel auctor. Donec convallis arcu eu accumsan pulvinar. Nulla sollicitudin, nisl id vestibulum pulvinar, ipsum tellus varius turpis, vitae congue arcu nisl in nibh. Sed quis libero vitae erat faucibus consequat nec sit amet mi. Nulla scelerisque consequat posuere.</p>
    </div>
</section>

<p>Other text on the page yesss party woot woot. Donec sem elit, rutrum eu sapien sed, finibus convallis turpis. Aenean mattis tincidunt orci vel auctor. Donec convallis arcu eu accumsan pulvinar. Nulla sollicitudin, nisl id vestibulum pulvinar, ipsum tellus varius turpis, vitae congue arcu nisl in nibh. Sed quis libero vitae erat faucibus consequat nec sit amet mi. Nulla scelerisque consequat posuere.</p>

CSS

:root {
  --colorGarnet: hsl(350, 78%, 30%);
	--colorGarnet_bright: hsl(351, 80%, 34%);
	--colorGarnet_dark: hsl(349, 98%, 18%);
	--colorGarnet_dark2: hsl(350, 97%, 12%);

	--colorGray: hsl(0, 0%, 44%);
	--colorGray_light: hsl(0, 0%, 94%);

	--colorBlue: hsl(198, 86%, 27%);
	--colorBlue_bright: hsl(195, 61%, 46%);
	--colorBlue_dark: hsl(198, 94%, 14%);

	--colorGreen: hsl(57, 66%, 22%);
	--colorGreen_bright: hsl(55, 60%, 44%);

	--animationSpeed: .3s;
}

body {
  box-sizing: border-box;
  font-family: "Helvetica Neue", sans-serif;
  margin: 30px;
  line-height: 1.25;
  width: 50%;
}

h1, h2, h3, h4, h5, h6, p {
	font-family: georgia;
	margin: 1em 0 .3em;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.1em; }


/*-------- Foldaway  --------*/

.foldaway {
 	margin-bottom: 20px;
	padding-right: 2em;
	border: 1px solid transparent;
	transition: 
		padding .3s ease-in-out, 
		background-color .3s,
		border-color .3s
		;
}

.foldaway-title {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	cursor: pointer;
	
	._icon {
		display: block;
		background-color: var(--colorBlue_bright);
		background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0px' y='0px' viewBox='0 0 100 100' fill='%23fff'%3E%3Cg transform='translate(0,-952.36218)'%3E%3Cpath d='m 44,964.36218 0,32 -32,0 0,12.00002 32,0 0,32 12,0 0,-32 32,0 0,-12.00002 -32,0 0,-32 z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
		background-size: 80%;
		background-position: center;
		background-repeat: no-repeat;
		color: white;
		border-radius: 50px;
		padding: 3px;
		height: 1em; 
    width: 1em;
		text-align: center;
		margin-left:.7em;
		transform: rotate(0deg);
		transition: transform .2s, background-color .2s;
	}
	
	h2 {
		padding: 0;
		margin: 0;
	}
}

.foldaway-content {
	overflow: hidden;
	max-height: 0;
	outline: 2px solid red;
	transition: max-height var(--animationSpeed);
}

.foldaway._visible {
	background:...

JavaScript

// $(document).ready(function(){
//   $(".title").click(function(){
//       $(".foldaway-inner").slideToggle();
//       $(".foldaway").toggleClass("container");
//   });
// });


document.addEventListener("DOMContentLoaded", function() {
	var btnHeaders = document.querySelectorAll('.btn-container .title');
	if( ! btnHeaders ) return;
	btnHeaders.forEach( h => h.addEventListener('click', function(e) {
		this.parentNode.classList.toggle('_visible');
		//$(this).siblings('.btn-content').slideToggle(300);
	}))
});