Pure HTML and CSS Accordion

index.html

<ul class="accordion">
  <li class="accordion-item">
    <input id="s1" class="hide" type="checkbox">
    <label for="s1" class="accordion-button">
      <span class="title">Real Abstraction: In the Mind but not from There</span>
			<span class="date">Thu May 6th, 2021 @ 11am PDT</span>
    </label>
    <div class="accordion-content">
          <p>
					<span class="speakers">Speakers:</span>
					Gean Moreno, Jaleh Mansoor, Johanna Gosse (mod), Sven Lütticken
					</p>
					<p>“In the last decade or so,” writes Gean Moreno, the lockstep incursion of flat ontologies, notions of quasi-sentient matter, slime-lined and mushroom-sprouting vitalisms, and network-everything into contemporary art discourse and exhibitions has been hard to miss. Embraced with steady fanfare, a slushy and exhilaratingly immoderate carnival of chemistry and composting…has us querying the unfathomable inexhaustibility of objects, their capacity to pipeline unwieldy forces and transgress the tiny territory of the real available to human access.” In opposition to this trend, some artists, critics, curators, and theorists have been drawing on the critique of political economy to mobilize the concept of “real abstraction”(originally developed by Alfred Sohn-Rethel, and recently updated by Alberto Toscano) for contemporary cultural production. Let’s talk to a few of them.
					</p>
					  
					</div>
  </li>
  <li class="accordion-item">
    <input id="s2" class="hide" type="checkbox" checked>
    <label for="s2" class="accordion-button">Second</label>
    <p class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis ultrices nunc. Suspendisse a magna purus. In hac habitasse platea dictumst. Nullam sed nisl quis sem dignissim luctus. Etiam luctus mauris nulla, et efficitur massa efficitur ac.</p>
  </li>
</ul>

pure-html-and-css-accordion.markdown

Pure HTML and CSS Accordion

Created and designed (in browser) a pure HTML and CSS expandable accordion for fun. I tried to think outside of the box when designing this (no pun intended).

I used a (hidden) checkbox to toggle the expanding and collapsing of each panel. I am not fully satisfied with the animations, but I will revisit that at a later time.

Caveat: Each section opens and closes independently of each other. Created for desktop only—I haven't checked mobile.

A Pen by Mike Carlson on CodePen.

License.

style.scss

$border-color: #e0e0e0;

*,
*:before,
*:after {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: roboto, helvetica, arial, san-serif;
	color: #666;
	background: #e0e0e0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: inherit;
}

.hide {
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	padding: 0;
	position: absolute;
	width: 1px;
}

.accordion {
	background: #fff;
	width: 400px;
	border: 1px solid $border-color;
  
  width: 95%;
	max-width: 1000px;
	margin: 2% auto;
}

.accordion-item {
	position: relative;
	width: 100%;
	border-bottom: 1px solid $border-color;

	&:last-child {
		border-bottom: none;
	}
}

.accordion-button {
  display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 20px 0 20px 30px;
	font-size: 18px;
  
  .title {
	  width: 50%;
	  font-weight: 600;
	  text-transform: capitalize;
  }

  .date {
    color: #de1a2b;
    margin: 0 auto;
    font-weight: 600;
  }

	&:hover {
		cursor: pointer;
	}

	&:before {
		content: "";
		position: absolute;
		height: 5px;
		width: 5px;
		top: 22px;
		left: 12px;
		display: inline-block;
		border-left: 5px solid #999;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
	}

	input[type="checkbox"]:checked ~ &:before {
		transform: rotate(90deg);
	}
}

.accordion-content {
	margin: 0;
	overflow: hidden;

	//transition: transform .5s ease-in-out;

	opacity: 0;
	height: 0;
	transform: scale(1, 0);
  transition: all 0.1s ease-in-out;
	transform-origin: center top;

	input[type="checkbox"]:checked ~ & {
		border: 1px solid $border-color;
		margin: 0 1em 15px;
		background: #fff;
		//box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.16);
		padding: 30px;

		height: auto;
		opacity: 1;
		transform: scale(1, 1);
   
    transition-delay: 0s;
	}
  
  .speakers {
	  display: block;
	  font-weight: bold;
  }
}