Soy nuevo aqui.
Estoy tratando de convertir mi <li> en un acordeón en la vista móvil.
De hecho, tengo algo similar a:
<div class="general" id="horizontalTab"> <div class="list"> <nav> <ul> <li class="item1">Item 1</li> <li class="item2">Item 2</li> <li class="item3">Item 3</li> </ul> </nav> <div> <div> <div class="item1">Description 1</div> <div class="item2">Description 2</div> <div class="item3">Description 3</div> <div> <div>Y tengo esto en el footer.php
<script src="<?php echo get_stylesheet_directory_uri(); ?>/assets/js/jquery.responsiveTabs.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var $tabs = $('#horizontalTab'); $tabs.responsiveTabs({ rotate: false, startCollapsed: 'accordion', collapsible: 'accordion' }); }); </script>Pero me muestra "Error de tipo no detectado: oTab no está definido". Entonces, cada vez que hago clic en el li, se muestra la descripción del div relacionado.
Ahora me gustaría convertir eso en un acordeón para la versión móvil y mover la descripción debajo de su <li> .
¿Algunas ideas?
Intenté seguir esto: https://www.jqueryhub.com/responsive-tabs-to-accordion-jquery-plugin-responsive-tabs/ pero no funciona :(
¡Gracias!
Funciona para mí si elimino el div class="list" y agrego a
Si ignora la demostración, por supuesto tendrá problemas
Tenga en cuenta que las pestañas no son horizontales si no tienen suficiente espacio horizontal
$(document).ready(function() { var $tabs = $('#horizontalTab'); $tabs.responsiveTabs({ rotate: false, startCollapsed: 'accordion', collapsible: 'accordion' }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/responsive-tabs/1.4.4/js/jquery.responsiveTabs.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/responsive-tabs/1.4.4/css/responsive-tabs.min.css" /> <div class="general" id="horizontalTab"> <ul> <li><a href="#item1">Tab-1</a></li> <li><a href="#item2">Tab-2</a></li> <li><a href="#item3">Tab-3</a></li> </ul> <div id="item1">Tab content 1</div> <div id="item2">Tab content 2</div> <div id="item3">Tab content 3</div> </div>Esta es la forma (tautológica) de hacerlo:
var test = document.getElementById("test"); test.addEventListener("click", function(e) { console.log("click: " + e.target.tagName); var selected = test.querySelector("li.selected"); if (selected) selected.classList.toggle("selected"); e.target.classList.add("selected"); }); li.accord p{ display: none; } li.accord.selected p{ display: block; } /* It's a good idea to add this negative style too */ li.accord:not(.selected) p { display: none; } li.accord { background: grey; } <ul id = "test"> <li class="accord">1<p>1</p></li> <li class="accord">2<p>2</p></li> <li class="accord">3<p>3</p></li> </ul>