Menu tipo acordeón – Readymag Help

El código personalizado funciona en todos los planes de pago (excepto en el plan Creator que ya ha sido archivado). Con un plan gratuito, puedes ver el código de trabajo funcionando en el modo vista previa, pero no en un proyecto publicado.

Este fragmento de código fue proporcionado por el usuario de Readymag Headless Horse.

Para añadir un menú tipo acordeón a tu proyecto, crea un widget de código. Haz doble clic en él e inserta el siguiente código en la sección de código del widget (eliminando todo el resto):

<div class="accordion-container">
  <p class="accordion" style="border-top: 1px solid #999;">Panel 1</p>
  <div class="accordion-content">
    <p>
      Text line 1
      <br />
      Text line 2
      <br />
      Text line 3
      <br />
      Text line 4
    </p>
    <br />
  </div>

  <p class="accordion">Panel 2</p>
  <div class="accordion-content">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum ea odit dicta illum adipisci, consequatur numquam veniam harum hic temporibus possimus esse voluptatem omnis necessitatibus vero in facere totam iusto similique quas sapiente earum ipsam aut? Praesentium saepe, eaque aspernatur sapiente facere iusto? Aliquam libero dolorum inventore, illo animi magni eius nulla cupiditate quis, alias qui minus ratione possimus itaque sapiente sint assumenda consectetur sit at earum quod. Porro earum blanditiis delectus animi libero iste praesentium at sequi cupiditate numquam corrupti facilis nihil necessitatibus dolorum temporibus odio laudantium omnis, eos voluptates ipsam dolore quis enim ex! Pariatur cumque obcaecati modi.
    </p>
    <br />
  </div>

  <p class="accordion">Panel 3</p>
  <div class="accordion-content">
    <p>
      Text line 2
      <br />
      <a href="https://readymag.com/examples" target="_blank">examples</a>
      <br />
      Text line 3
      <br />
      Text line 4
    </p>
    <br />
  </div>

  <style>
    /* accordion title text styles */
    .accordion-container p.accordion {
      font-family: Inter;
      font-size: 18px;
    }

    /* accordion content text styles */
    .accordion-container .accordion-content p {
      font-family: Inter;
      font-size: 14px;
    }

    /* accordion content link styles */
    .accordion-container .accordion-content a {
      font-family: Inter;
      font-size: 14px;
      font-style: italic;
    }

    /* accordion title styles */
    .accordion-container .accordion {
      cursor: pointer;
      padding: 15px 8px;
      margin: 0;
      font-weight: 300;
    }

    /* accordion icon box styles */
    .accordion-container .accordion::after {
      content: '✕';
      float: right;
      transform: rotate(-45deg);
      font-size: 11px;
      transition: .2s ease-out;
    }

    /* accordion icon box styles: opened  */
    .accordion-container .active::after {
      content: "✕";
      transform: rotate(0deg);
      font-size: 11px;
    }

    /* accordion content box styles: default */
    .accordion-container .accordion-content {
      padding: 0 8px;
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.2s ease-out;
      border-bottom: 1px solid #999;
    }

  </style>
</div>

<script>
  (function() {
  const accordionHeading = document.querySelectorAll(".accordion");
  const accordionContent = document.querySelectorAll(".accordion-content");

  for (let i = 0; i < accordionHeading.length; i++) {
    accordionHeading[i].onclick = function() {
      if (this.nextElementSibling.style.maxHeight) {
        hideContent();
      } else {
        showContent(this);
      }
    };
  }

  function showContent(elem) {
    hideContent();
    elem.classList.add("active");
    elem.nextElementSibling.style.maxHeight =
      elem.nextElementSibling.scrollHeight + "px";
  }

  function hideContent() {
    for (let i = 0; i < accordionContent.length; i++) {
      accordionContent[i].style.maxHeight = null;
      accordionHeading[i].classList.remove("active");
    }
  }
  })();
</script>

Después, no olvides hacer clic en "Save & Close" para aplicar el código insertado. Puedes editar fácilmente el estilo del texto y añadir otras variables para las etiquetas <p> y <a>, para que el menú tipo acordeón se adapte mejor a tu diseño.

Para cambiar el tipo de letra, simplemente edita el font-family en la siguiente sección de código:

/* accordion title text styles */
.accordion-container p.accordion {
  font-family: Inter;
  font-size: 18px;
}

/* accordion content text styles */
.accordion-container .accordion-content p {
  font-family: Inter;
  font-size: 14px;
}

Si quieres utilizar una fuente personalizada, primero tienes que cargarla mediante el widget de texto. Después, empleando la herramienta “Inspector tool”, busca el nombre correspondiente a la familia de fuentes para introducirlo en el código insertado.

Para cambiar los bordes de los recuadros, edita el border-bottom dentro de .accordion-panel de la sección <style>.

Para reemplazar el icono que cerrará tu menú o cambiar su comportamiento, altera esta parte del código:

.accordion-container .accordion::after {
  content: '✕';
  float: right;
  transform: rotate(-45deg);
  font-size: 11px;
  transition: .2s ease-out;
}

.accordion-container .active::after {
  content: "✕";
  transform: rotate(0deg);
  font-size: 11px;
}

Puedes utilizar cualquier símbolo de texto o incluso un emoji como valor de contenido.

Artículos relacionados