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">
<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>
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!
Works for me if I remove the div class="list" and add a
If you ignore the demo, you will of course have issues
Note the tabs are not horizontal if they do not have enough horizontal space
$(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>Here's the (tautological) way to do it:
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>