I’m new here.
I’m trying to convert my <li>
into an accordion in the mobile view.
I actually have something similar to:
<div class="general" id="horizontalTab">
<div class="list">
<ul>
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
<div>
<div>
<div class="item1">Description 1</div>
<div class="item2">Description 2</div>
<div class="item3">Description 3</div>
<div>
<div>
And I have this on the 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>
But it shows me “Uncaught TypeError: oTab is undefined”
So every time I click on the li it displays the related div description.
Now I’d like to convert that into an accordion for the mobile version and moving the description under its <li>
.
Any ideas?
I’ve tryied following this: https://www.jqueryhub.com/responsive-tabs-to-accordion-jquery-plugin-responsive-tabs/ but it’s not working 🙁
Thanks!