Convert to accordion

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!

Answer

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>