matobaa/accordion_by_css.html

## accordion_by_css.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    ul {
      list-style: none;  /* no bullet */
    }

    ul li {
      isolation: isolate; /* forms a new stacking context; cause an opacity needs it */
      [type="radio"],[type="checkbox"] {
        display: none;
      }
      & i::before {  /* should be inside of h2 for clickable */
        content: "▷ ";
      }
      &:has(:checked) i::before {
        content: "▽ ";
      }
      & p {
        transition-property: max-height opacity;
        transition-duration: 0.3s;
        max-height: 0;
        opacity: 0;
      }
      &:has(:checked) p {
        max-height: 100px;  /* should be tuned */
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <h1>CSS + HTML only Accordion Element</h1>
  <ul>
    <li>
      <input name="group" type="radio" id="r1" checked />
      <h2><label for="r1"><i></i>radio 1</label></h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quam eius quas itaque molestiae quos quis veritatis voluptate nihil fugiat! Corrupti animi error id modi maxime autem nostrum quae doloremque.
      </p>
    </li>
    <li>
      <input name="group" type="radio" id="r2" />
      <h2><label for="r2"><i></i>radio 2</label></h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem officia error, eos accusantium vel assumenda deleniti aliquam vero inventore dignissimos reiciendis nam deserunt perferendis officiis sequi asperiores, delectus nemo! Culpa.
      </p>
    </li>
    <li>
      <input name="group" type="radio" id="r3" />
      <h2><label for="r3"><i></i>redio 3</label></h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, fugiat minus. Voluptatum similique itaque molestias ut facere unde quidem odio vel, illum quae laudantium aut amet, nulla iste voluptates excepturi.
      </p>
    </li>
  </ul>
  <h1>CSS + HTML only Accordion Element</h1>
  <ul>
    <li>
      <input type="checkbox" id="c1" checked />
      <h2><label for="c1"><i></i>checkbox 1</label></h2>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis optio molestias non similique ad perspiciatis id dicta, aperiam quis ipsa? Quo ad quaerat praesentium voluptatum officiis corrupti, laboriosam quae maxime!
      </p>
    </li>
    <li>
      <input type="checkbox" id="c2" />
      <h2><label for="c2"><i></i>checkbox 2</label></h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, at ab eos quam quasi consequatur qui quidem est asperiores tempora veritatis, fugit nam deleniti velit odit aliquam aperiam eveniet natus.
      </p>
    </li>
    <li>
      <input type="checkbox" id="c3" />
      <h2><label for="c3"><i></i>checkbox 3</label></h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis possimus modi itaque quas quos quibusdam deleniti ducimus nesciunt, praesentium debitis est provident saepe adipisci qui nobis distinctio quidem quae inventore?
      </p>
    </li>
  </ul>
  <hr/>
</body>

</html>
	<!DOCTYPE html>
	<html lang="ja">

	<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>
	ul {
	list-style: none; /* no bullet */
	}

	ul li {
	isolation: isolate; /* forms a new stacking context; cause an opacity needs it */
	[type="radio"],[type="checkbox"] {
	display: none;
	}
	& i::before { /* should be inside of h2 for clickable */
	content: "▷ ";
	}
	&:has(:checked) i::before {
	content: "▽ ";
	}
	& p {
	transition-property: max-height opacity;
	transition-duration: 0.3s;
	max-height: 0;
	opacity: 0;
	}
	&:has(:checked) p {
	max-height: 100px; /* should be tuned */
	opacity: 1;
	}
	}
	</style>
	</head>

	<body>
	<h1>CSS + HTML only Accordion Element</h1>
	<ul>
	<li>
	<input name="group" type="radio" id="r1" checked />
	<h2><label for="r1"><i></i>radio 1</label></h2>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quam eius quas itaque molestiae quos quis veritatis voluptate nihil fugiat! Corrupti animi error id modi maxime autem nostrum quae doloremque.
	</p>
	</li>
	<li>
	<input name="group" type="radio" id="r2" />
	<h2><label for="r2"><i></i>radio 2</label></h2>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem officia error, eos accusantium vel assumenda deleniti aliquam vero inventore dignissimos reiciendis nam deserunt perferendis officiis sequi asperiores, delectus nemo! Culpa.
	</p>
	</li>
	<li>
	<input name="group" type="radio" id="r3" />
	<h2><label for="r3"><i></i>redio 3</label></h2>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, fugiat minus. Voluptatum similique itaque molestias ut facere unde quidem odio vel, illum quae laudantium aut amet, nulla iste voluptates excepturi.
	</p>
	</li>
	</ul>
	<h1>CSS + HTML only Accordion Element</h1>
	<ul>
	<li>
	<input type="checkbox" id="c1" checked />
	<h2><label for="c1"><i></i>checkbox 1</label></h2>
	<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis optio molestias non similique ad perspiciatis id dicta, aperiam quis ipsa? Quo ad quaerat praesentium voluptatum officiis corrupti, laboriosam quae maxime!
	</p>
	</li>
	<li>
	<input type="checkbox" id="c2" />
	<h2><label for="c2"><i></i>checkbox 2</label></h2>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, at ab eos quam quasi consequatur qui quidem est asperiores tempora veritatis, fugit nam deleniti velit odit aliquam aperiam eveniet natus.
	</p>
	</li>
	<li>
	<input type="checkbox" id="c3" />
	<h2><label for="c3"><i></i>checkbox 3</label></h2>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis possimus modi itaque quas quos quibusdam deleniti ducimus nesciunt, praesentium debitis est provident saepe adipisci qui nobis distinctio quidem quae inventore?
	</p>
	</li>
	</ul>
	<hr/>
	</body>

	</html>