JSFiddle - React, Tailwind, and code Playground

by Fabio Dan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<main>
  <ul class="list">
    <li class="item collapsed">
      <button class="title">List Item Title
        <div class="icon down">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M4.71967 8.09467C4.99003 7.82431 5.41546 7.80351 5.70967 8.03228L5.78033 8.09467L12 14.3137L18.2197 8.09467C18.49 7.82431 18.9155 7.80351 19.2097 8.03228L19.2803 8.09467C19.5507 8.36503 19.5715 8.79046 19.3427 9.08467L19.2803 9.15533L12.5303 15.9053C12.26 16.1757 11.8345 16.1965 11.5403 15.9677L11.4697 15.9053L4.71967 9.15533C4.42678 8.86244 4.42678 8.38756 4.71967 8.09467Z" fill="black"/>
          </svg>
        </div>
        <div class="icon up">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4697 8.09467C11.74 7.82431 12.1655 7.80351 12.4597 8.03228L12.5303 8.09467L19.2803 14.8447C19.5732 15.1376 19.5732 15.6124 19.2803 15.9053C19.01 16.1757 18.5845 16.1965 18.2903 15.9677L18.2197 15.9053L12 9.68625L5.78033 15.9053C5.50997 16.1757 5.08454 16.1965 4.79033 15.9677L4.71967 15.9053C4.44931 15.635 4.42851 15.2095 4.65728 14.9153L4.71967 14.8447L11.4697 8.09467Z" fill="black"/>
          </svg>
        </div>
      </button>
      <p class="content">Lorem ipsum dolor sit amet consectetur. Cursus quis tortor quam imperdiet turpis mattis massa donec bibendum. Sed ullamcorper pellentesque at fermentum ipsum sed cras tincidunt neque. Tristique neque integer velit habitant sem massa neque. Enim felis odio adipiscing mattis sed felis egestas.      </p>
    </li>
    <li class="item collapsed">
      <button class="title">List Item Title
        <div class="icon down">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none"...

CSS

@font-face {
    font-display: swap;
    font-family: ui-icons;
    src: url(https://i5.walmartimages.com/dfw/63fd9f59-609c/b8151153-f437-48e7-8ff3-558985f3515c/v2/en-US/_next/static/media/ui-icons.d1149b9e.woff2) format("woff2"),url(https://i5.walmartimages.com/dfw/63fd9f59-609c/b8151153-f437-48e7-8ff3-558985f3515c/v2/en-US/_next/static/media/ui-icons.6af02c73.woff) format("woff");
}



html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 800px;
  margin: 0 auto;
}
*, *::before, *::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: "Bogle";
  font-style: normal;
  color: #2E2F32;
  background: white;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: solid 1px #E3E4E5;
  /* display: block; */
  /* width: 480px; */
}

.title {
  margin: 0;
  padding: 16px;
  width: 100%;
  display: block;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  background: none;
  text-align: left;
  border: none;
  background: white;
  position: relative; 
  z-index: 1;
}

@media(hover: hover) and (pointer: fine) {
  .title:hover {
    background: #F8F8F8;
    cursor: pointer;
  }
}

.item {
  border-top: solid 1px #E3E4E5;
  position: relative;
}

.collapsed p {
  display: none;
}
.icon.down {
  display: none;
}
.collapsed .icon.up {
  display: none;
}

.collapsed .icon.down {
  display: block;
}

.content {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;  
  padding: 8px 16px 16px 16px;
}

.icon {
  display: block;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 24px;
  height: 24px;
  overflow: hidden;
  z-index: -1;
}

JavaScript

let item = document.getElementsByClassName("title");


for (var i = 0; i < item.length; i++) {
	item[i].addEventListener("click", (event) => {
  	event.target.parentElement.classList.toggle("collapsed")
  });
}