Free Code: Avada Tabs Dropdown on Mobile

[JoshWolfenberg]

#871739

Here is some free code if you wish to turn the Avada Tabs into a Select Dropdown on mobile. This is a much better user experience when compared to the default Avada functionality.

Note: this requires basic Developer skills to achieve your desired result.

Avada relies on Bootstrap tabs, so we’ll simply tap into that functionality for our mobile select tabs.

Add a new container and insert a code block with the code below. You will update the titles of the links to match your own Tab titles. You can also adjust the number of Tabs to match yours.

You will want this Container to be hidden on Desktop and only show on Mobile. Also on mobile, you will want to hide the default Avada Tabs through CSS.

Hope this is helpful for you!

<select class="mb10 mt10 form-control" id="tab_selector">
  <option value="0">Overview</option>
  <option value="1">Cirriculum</option>
  <option value="2">Dates & Costs</option>
  <option value="3">Daily Schedule</option>
  <option value="4">Testimonials</option>
  <option value="5">FAQ</option>
  <option value="6">Apply</option>
</select>

<script>
jQuery('#tab_selector').on('change', function (e) {
  jQuery('.nav-tabs li a').eq(jQuery(this).val()).tab('show');
});
</script>

[LGDWP2017]

#880213

Greeting Josh.

Thanks for the information. I’ve been looking for code that would do just as you specify. I do have a couple of questions, if you’d be so kind as to answer.

1. Does it matter where on the Page the container with the code block is placed? Before or after the Tab element?
2. What CSS do I use to hide the default Avada tabs?

Thanks.

[stphnwlkr]

#880309

This breaks accessibility since there is no relationship between the select and the content.

[LGDWP2017]

#880360

Is it possible then to override the Avada Tab default on mobile view that opens the first tab? The idea is to keep the tabs closed so the users sees all the tabs titles until tapped and then the tab opens to content. Thanks.

[Author]

Posts