How to create Tabs in Astroid.

Astroid is based on Bootstrap 4 and any native Joomla plugin using Bootstrap 2 functionality will not work with Astroid.

Good thing, we’ve got you covered.

Bootstrap 4 has tabs built in and all you have to do is use the ready made HTML, modify it to create the HTML of your choice and you are good to go.

Head over to the following link: https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior, once there copy the HTML (also below), into your Joomla content editor

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

This code by default will let you 3 tabs and content below, once done, you can modify the tab names to fit your needs and even add more tabs by copying the LI and div at the below. The link between the tab and the div is the ID and the href=”” on the A tag.

So, <a class=”nav-link” id=”contact-tab” data-toggle=”tab” href=”#contact” role=”tab” aria-controls=”contact” aria-selected=”false”>Contact</a> would show the content of div with id contact.

See video below for more:

"How to" docs

Related Articles