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.sass

$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 
	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 
		padding: 30px 
		height: auto 
		opacity: 1 
		transform: scale(1, 1) 
		transition-delay: 0s 		  
		  
  .speakers 
	  display: block 
	  font-weight: bold