Function that by clicking open a respective <ul> on another page

Question

when clicking on a category as in the image below, it is redirected to another page,

that when you are using your computer it opens that way:

Only that you also need to use on mobile phones, but when it is responsive you need to click again on the name of the category to open and show the information.

After clicking again:

I can’t change anything in the source code because my boss didn’t authorize it ( , he just wants a function that when choosing its category and being redirected, this category is already open to the user without needing to click again to open.

Below a part of the source code to help understand:

index.html (First image):

<div class="main-content">
  <div class="w3-categories">
    <h3>Browse Categories</h3>
    <div class="container">
      <div class="col-md-3">
        <div class="focus-grid w3layouts-boder1">
          <a class="btn-8" href="categories.html">
            <div class="focus-border">
              <div class="focus-layout">
                <div class="focus-image"><i class="fa fa-mobile"></i></div>
                <h4 class="clrchg">Mobiles</h4>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <div class="focus-grid w3layouts-boder2">
          <a class="btn-8" href="categories.html#parentVerticalTab2">
            <div class="focus-border">
              <div class="focus-layout">
                <div class="focus-image"><i class="fa fa-laptop"></i></div>
                <h4 class="clrchg"> Electronics & Appliances</h4>
              </div>
            </div>
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <div class="focus-grid w3layouts-boder3">
          <a class="btn-8" href="categories.html#parentVerticalTab3">
            <div class="focus-border">
              <div class="focus-layout">
                <div class="focus-image"><i class="fa fa-car"></i></div>
                <h4 class="clrchg">Cars</h4>
              </div>
            </div>
          </a>
        </div>
      </div>

Categories.html (Second/third image):

<div class="categories-section main-grid-border">
  <div class="container">
    <h2 class="w3-head">All Categories</h2>
    <div class="category-list">
      <div id="parentVerticalTab">
        <div class="agileits-tab_nav">
          <ul class="resp-tabs-list hor_1">
            <li>Mobiles</li>
            <li>Electronics & Appliances</li>
            <li>Cars</li>
            <li>Bikes</li>
            <li>Furniture</li>
            <li>Pets</li>
            <li>Books, Sports & Hobbies</li>
            <li>Fashion</li>
            <li>Kids</li>
            <li>Services</li>
            <li>Jobs</li>
            <li>Real Estate</li>
          </ul>
          <a class="w3ls-ads" href="all-classifieds.html">View all Ads</a>
        </div>
        <div class="resp-tabs-container hor_1">
          <div>
            <div class="category">
              <div class="category-img">
                <img src="images/cat1.png" title="image" alt="" />
              </div>
              <div class="category-info">
                <h4>Mobiles</h4>
                <span>5,12,850 Ads</span>
                <a href="all-classifieds.html">View all Ads</a>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="sub-categories">
              <ul>
                <li><a href="mobiles.html">mobile phones</a></li>
                <li><a href="mobiles.html">Tablets</a></li>
                <li><a href="mobiles.html">Accessories</a></li>
              </ul>
            </div>
          </div>
          <div>
            <div class="category">
              <div class="category-img">
                <img src="images/cat2.png" title="image" alt="" />
              </div>
              <div class="category-info">
                <h4>Electronics & Appliances</h4>
                <span>2,01,850 Ads</span>
                <a href="all-classifieds.html">View all Ads</a>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="sub-categories">
              <ul>
                <li><a href="electronics-appliances.html">Computers & accessories</a></li>
                <li><a href="electronics-appliances.html">Tv - video - audio</a></li>
                <li><a href="electronics-appliances.html">Cameras & accessories</a></li>
                <li><a href="electronics-appliances.html">Games & Entertainment</a></li>
                <li><a href="electronics-appliances.html">Fridge - AC - Washing Machine</a></li>
                <li><a href="electronics-appliances.html">Kitchen & Other Appliances</a></li>
              </ul>
            </div>
          </div>
          <div>

Thanks for your help! :)

Answer 1

A very simple way, you will need to change only one thing in the menu links:

<a class="btn-8" href="categories.html?cat=Mobiles"> <!-- Passar via get a categoria -->
    <div class="focus-border">
        <div class="focus-layout">
            <div class="focus-image"><i class="fa fa-mobile"></i></div>
            <h4 class="clrchg">Mobiles</h4>
        </div>
    </div>
</a>

And the function:

var li = document.getElementsByTagName('li') // Pega todos <li>
var cat = '<?php echo $_GET["cat"]; ?>' // Cria a variável cat com o valor passado por get 

//Loop passando por todos <li>
for(var i = 0; i < li.length; i++) {
    // Se o texto do li for igual ao texto passado por get chama o evento de click
    if(li[i].innerText == cat)
        li[i].click()
}

Note: Text passed by get should be equal to text of <li>

If you can put id in li it is easier:

var cat = '<?php echo $_GET["cat"]; ?>'
var li = document.getElementById(cat)
li.click()

Answer 2

Follow the reference link: https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion/blob/master/Index.html

I managed to solve using this script, follows below in case someone needs.

It was only necessary to comment clossed: 'accordion'

 <script type="text/javascript">
        $(document).ready(function() {

            //Vertical Tab
            $('#parentVerticalTab').easyResponsiveTabs({
                type: 'vertical', 
                width: 'auto', 
                fit: true, 
                //closed: 'accordion', 
                tabidentify: 'hor_1', // The tab groups identifier
                activate: function(event) { // Callback function if tab is switched
                    var $tab = $(this);
                    var $info = $('#nested-tabInfo2');
                    var $name = $('span', $info);
                    $name.text($tab.text());
                    $info.show();
                }
            });
        });
    </script>