Convert <li> to accordion-CodePudding

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  id="horizontalTab">
    <div >
        <nav>
            <ul>
                <li >Item 1</li>
                <li >Item 2</li>
                <li >Item 3</li>
            </ul>
        </nav>
    <div>
    <div>
        <div >Description 1</div>
        <div >Description 2</div>
        <div >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!

CodePudding user response：

Works for me if I remove the div 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  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>

CodePudding user response：

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 >1<p>1</p></li>
<li >2<p>2</p></li>
<li >3<p>3</p></li>
</ul>