¿Cómo puedo crear un acordeón con jQuery en WordPress?

12 minutos de lectura

avatar de usuario
elchiconoob

Estoy tratando de crear un acordeón que sea un poco diferente a la mayoría.

Lo que estoy tratando de hacer:

  • Tener un título que al hacer clic en un descripción se muestra en todo el ancho de la página
  • Me gustaría tener los títulos divididos en la pantalla en tres columnas; por lo tanto, el título no ocuparía el ancho de la página

Básicamente buscando algo como esto:

No se ha hecho clic en ningún elemento
Una vez que se hace clic en el primer elemento
Si se hace clic en el segundo elemento

Como puede ver, esto es un poco diferente a la mayoría de los casos. Encontré una demostración en vivo de algo similar a lo que estoy tratando de hacer, esto se puede encontrar aquí.

Lo que he hecho hasta ahora:

He estado usando Cherry Framework y códigos abreviados para intentar que esto funcione, pero me encuentro con problemas cuando trato de expandir la descripción del título. No estoy seguro si hay una manera de editar el acordeón shortcode para permitir que la descripción ocupe todo el ancho o no, pero creo que eso sería ideal.

Aquí está mi código hasta ahora:

    [tabs direction="top" tab1="the first tab" tab2="the second tab" tab3="the third tab"]
[tab1]

[row]

[span4]

[accordion title="Title 1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]

[/span4]

[span4]

[accordion title="Title 2"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]

[span4]

[accordion title="Title 3"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]

[/row]

[row]

[span4]

[accordion title="Title 4"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]

[span4]

[accordion title="Title 5"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]

[span4]

[accordion title="Title 6"] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, porta et nulla ut, bibendum placerat sem. Aliquam a consequat ante, cursus posuere eros. Fusce ac turpis in turpis elementum malesuada vitae eu urna. Curabitur felis enim, luctus vitae pharetra eget, aliquam quis sem. Mauris ipsum erat, sodales et aliquet in, vehicula ut nisl. Aliquam vestibulum diam dictum odio mollis, ut pretium erat elementum. Nunc ornare, quam vitae maximus tincidunt, elit nunc ornare neque, ut tincidunt lorem orci at sem. Sed arcu tellus, vulputate non ante vitae, varius congue urna. Duis sed lacus est. Mauris eu lacus ac enim fermentum vestibulum. Pellentesque pellentesque ornare auctor. Curabitur imperdiet ipsum et justo bibendum, eget eleifend dui iaculis. 

[/accordion]
[/span4]
[/row]

Aquí están las capturas de pantalla de lo que tengo:
Nada hizo clic
Se hizo clic en el primer elemento
Hizo clic en los 2 elementos siguientes

Como dije, estoy usando códigos cortos para hacer esto a partir de ahora. Estoy seguro de que hay una manera más fácil de hacer esto en la que no me encontraría con problemas en los que el texto de la descripción no atraviesa el ancho de la página.

avatar de usuario
Mukul Kant

A continuación se muestra un ejemplo, compruebe el código.

$(document).ready(function(){
    $('.main ul li').click(function(){
      $('.main ul li').removeClass('active');
      $(this).addClass('active');
      $('.main ul li').css('margin-bottom','1%');
      $('.innerBox').hide();
      var boxHeight=$(this).children('.innerBox').innerHeight();
      $(this).css('margin-bottom', boxHeight);
      $(this).children('.innerBox').slideDown();
      var widthUL = $('.main ul').width() - 10;
      var test = $(this);
      var leftUL = test.position().left;
      $('.innerBox').css({'width': widthUL,'margin-left':- leftUL});      
    });
  });
*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
.clrfix:after{
  content:'';
  clear:both;
  display:block;
}
.main{
  width:900px;
  margin:0 auto;
  border:1px solid #ccc;
  position: relative;
  overflow:hidden;
}
.main ul li{
  padding:.5%;
  width:31%;
  border:1px solid #ccc;
  list-style:none;
  margin:1%;
  display:inline-flex;
  position: relative;
  border-radius:5px;
}
.main ul li.active{
  background:#d7e3de;
  border:1px solid #333;
  border-bottom:none;
  padding:1%;
  border-radius:0;
}
.main ul li.active .innerBox{
  top:37px;
}
.main ul li .innerBox{
  background:#d7e3de;
  position:absolute;
  left:-1px;
  display:none;
  top:38px;
  z-index:1;
  border:1px solid #333;
  padding:10px;
  min-height:20px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="main">
    <ul class="clrfix">
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat caborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li><li>Title here
        <div class="innerBox">test</div>  
      </li>

      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li><li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>

      <li>Title here
        <div class="innerBox">test</div>  
      </li><li>Title here
        <div class="innerBox">test</div>  
      </li>
      <li>Title here
        <div class="innerBox">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>  
      </li>
      <li>Title here
        <div class="innerBox">test</div>  
      </li>

    </ul>
  </div>

Y espero que te ayude

  • Pude agregar y

    a las partes de javascript y css. Sin embargo, todavía tengo problemas para que javascript funcione. ¡Cualquier ayuda sería muy apreciada!

    – el chico novato

    21 de enero de 2016 a las 2:46

  • @theNoobGuy No te entiendo correctamente lo que quieres decir. ¿Puedes por favor elaborar?

    – Mukul Kant

    21 de enero de 2016 a las 4:32

  • @theNoobGuy probablemente tendrá que envolver el código de Maddy en una función para que $ funcione correctamente: (function($) { //code here })( jQuery ); Sugiero probar el código en JS.Violín primero en lugar de intentar colocarlo directamente en su sitio WP.

    – matt loco

    21 de enero de 2016 a las 5:41


  • @Maddy, ¡pude hacer que esto funcionara en su mayor parte! El único problema ahora es cuando estoy en mi dispositivo móvil, las cosas no se muestran correctamente. ¿Hay alguna manera de cambiar esto para el móvil?

    – el chico novato

    21 de enero de 2016 a las 13:59


  • @Maddy, también noté que al hacer clic por primera vez en uno de los títulos aparece un montón de espacios en blanco debajo de la descripción. ¿Pensamientos sobre esto?

    – el chico novato

    21 de enero de 2016 a las 14:06

avatar de usuario
J. Aarts

¿Qué pasa si haces que la descripción sea la misma que la del título para que no aparezca al 100% sino con el mismo ancho que el título? No sé cómo funciona wordpress, pero en html y css simples esto podría funcionar.

si esto no funciona, puede intentar convertirlos en columnas en css

por ejemplo, esto creará 2 columnas con una línea continua azul de 1 px entre ellas.

  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count:2 ; /* Firefox */
  -webkit-column-width: 50%; /* Chrome, Safari, Opera */
  -moz-column-width: 50%; /* Firefox */
  -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
  -moz-column-rule-style: solid; /* Firefox */
  -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
  -moz-column-rule-width: 1px; /* Firefox */
  -webkit-column-rule-color: blue; /* Chrome, Safari, Opera */
  -moz-column-rule-color: blue; /* Firefox */

esto no es realmente css pero funcionará en Firefox, Chrome, Safari y opera IE no funcionará pero he encontrado este que hace lo mismo hasta donde yo sé.

¿Ha sido útil esta solución?