Tab Navbar data-toggle isn't toggling

Need Help
#1

I am creating a product gallery for one of our clients and have a tabbed gallery with a tab-navbar element that determines which content is loaded in the gallery.

The tab/navbar is code as such:

 <!-- Begin Tab Navbar -->
        <ul class="nav nav-tabs row  g-2 d-flex nav-fill" data-aos="fade-up" data-aos-delay="100" role="tablist">
            {% for tab in data.tabs %}
            <li class="nav-item col-2" role="presentation">
            <a class="{{ loop.first ? 'nav-link active' : 'nav-link' }}" data-bs-toggle="tab" data-bs-target="#tabs-tab-{{loop.index}}" aria-selected="{{ loop.first ? 'true' : 'false' }}" role="tab" tabindex="-1">
                <h4>{{ tab.title }}</h4>
            </a>
            </li><!-- End tab nav item -->
            {% endfor %}
        </ul>
        <!-- End Tab Navbar -->

Which ties to the tab-content, the intial portion of which is written as follows:

<div class="tab-content" data-aos="fade-up" data-aos-delay="200">
            {% for tab in data.tabs %}
                <div class="tab-pane fade {{ loop.first ? 'show active' : '' }}" id="tabs-tab-{{loop.index}}" role="tabpanel">
                <div class="row">
                    <div class="col-lg-6 order-2 order-lg-1 mt-3 mt-lg-0 d-flex flex-column justify-content-center">
                    <h6>{{ tab.category }}</h6>
                    <h3>{{ tab.title }}</h3>
                    {{ tab.description|raw }}

The problem I’m running into is when I click on the tabs they no longer switch the content. They worked fine before I converted it to a partial.

Is there no way to have the variable “nav-link active” and “aria-selected=“true”” set statically? It seems like its being dynamically overridden preventing the buttons from working.

#2

Hey @LukeAbstract

I’m pretty sure in the latest bootstrap (v5) it was changed to data-bs-toggle

Could it be this?

#3

Is that not what I am using?

#4

Ah, I was going by the post title. Yes the markup has it but also if it’s bootstrap 4 or 3 then it won’t work with the bs part.

Perhaps it is caused by some nesting since it worked when not in a partial. Not sure sorry!

#5

October can do dynamic css though right? Its not locked into the classes that are in the .htm files? e.g. class=“nav-item” can change to class=“nav-item active” without being overridden by the class in the source file?

#6

Yes, you can do anything with it,.

Try removing these tags to see if it helps, could it be a collision between bootstrap and aos?

#7

I tried removing all the data-aos and data-aos-delay tags and it had no effect.

#8

Okay, I think I’ve identified the issue. The script to import bootstrap was not in my scripts partial, but now I’m getting an error trying to import it:

        
       http://127.0.0.1:8000/assets/vendor/bootstrap/js/bootstrap.bundle.min.js net::ERR_ABORTED 404 (Not Found)

I import them in my scripts partial as such:

<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

The path is correct, perhaps the syntax is wrong or my .htaccess file?

#9

Injecting Page Assets Programmatically

#10

Excellent! Thank you :pray:

1 Like
#11

Yes, it is working! Appreciate the help for a newbie! :partying_face:

1 Like