HTML

<section>
  <h1>
    Hypertext Accordion
  </h1>
  <details>
    <summary>Details</summary>
    <p>
      Lorem ipsum dolor sit amet, eu alia suscipit mei. Reque iriure delectus vix id, ex sed forensibus suscipiantur. In eos exerci mollis apeirian, an qui latine alienum. Ad mea libris maluisset, consul assueverit sea ex.
    </p>
  </details>
  <details>
    <summary>Features</summary>
    <p>
      Lorem ipsum dolor sit amet, eu alia suscipit mei. Reque iriure delectus vix id, ex sed forensibus suscipiantur. In eos exerci mollis apeirian, an qui latine alienum. Ad mea libris maluisset, consul assueverit sea ex.
    </p>
  </details>
  <details>
    <summary>Information
    </summary>
    <p>Lorem ipsum dolor sit amet, eu alia suscipit mei. Reque iriure delectus vix id, ex sed forensibus suscipiantur. In eos exerci mollis apeirian, an qui latine alienum. Ad mea libris maluisset, consul assueverit sea ex. </p>
  </details>
  <details>
    <summary>Specifications
    </summary>
    <p>Lorem ipsum dolor sit amet, eu alia suscipit mei. Reque iriure delectus vix id, ex sed forensibus suscipiantur. In eos exerci mollis apeirian, an qui latine alienum. Ad mea libris maluisset, consul assueverit sea ex. </p>
  </details>
</section>

CSS

html,
.root {
  padding: 0;
  margin: 0;
  font-size: 18px;
}

body {
  font: menu;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0;
  margin: 0;
}
section {
  padding-top: 4rem;
  width: 50%;
  margin: auto;
}
h1 {
  font-size: 2rem;
  font-weight: 500;
}
details[open] summary ~ * {
  animation: open 0.3s ease-in-out;
}

@keyframes open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
details summary::-webkit-details-marker {
  display: none;
}

details summary {
  width: 100%;
  padding: 0.5rem 0;
  border-top: 1px solid black;
  position: relative;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 300;
  list-style: none;
}

details summary:after {
  content: "+";
  color: black;
  position: absolute;
  font-size: 1.75rem;
  line-height: 0;
  margin-top: 0.75rem;
  right: 0;
  font-weight: 200;
  transform-origin: center;
  transition: 200ms linear;
}
details[open] summary:after {
  transform: rotate(45deg);
  font-size: 2rem;
}
details summary {
  outline: 0;
}
details p {
  font-size: 0.95rem;
  margin: 0 0 1rem;
  padding-top: 1rem;
}

JavaScript

Puede cambiar código para ver el resultado

Menú desplegable de CSS puro con detailsy summary

Puede cambiar código para ver el resultado

No hay comentarios:

Publicar un comentario