• Resolved r3dy06

    (@r3dy06)


    Greetings,

    This is my first post. I have scoured Google for answers and so far come up with nothing so I’m hopeful someone here can help. I imagine this *should* be simple but for some reason I can’t figure it out.

    My Problem
    Bootstrap tabs do not render on my site. Specifically the content within the ‘tab-content’ div doesn’t display. It shows up if I view the source of the page but clicking on the various tabs does not toggle the content to show anywhere on the page.

    My Setup
    Nothing fancy, to keep it simple I’ve created a page with the exact example from bootstrap’s documentation.
    https://www.pentestgeek.com/testing-tabs

    
    <div>
    
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
      </ul>
    
      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">...</div>
        <div role="tabpanel" class="tab-pane" id="profile">...</div>
        <div role="tabpanel" class="tab-pane" id="messages">...</div>
        <div role="tabpanel" class="tab-pane" id="settings">...</div>
      </div>
    
    </div>
    

    and I have placed it in a template file and created a page with the associated template. As you can see, clicking the tabs does not render any of the content. Inspecting my page via console only shows an error related to fonts.googleapis not loading via https. I don’t see how that could be causing this issue. As far as I can tell bootstrap css/js as well as jquery are all loaded properly.

    For reference, the look and feel I’m trying to create can be seen here https://easydigitaldownloads.com/your-account/ which is a wordpress site.

    Thanks to anyone who can help

    • This topic was modified 6 years, 11 months ago by r3dy06.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    Hi @r3dy06

    The example site you provided may not be accessible to many – myself included since I don’t have an account there. I would say more like: http://getbootstrap.com/components/#nav-tabs

    Looking at the markup on the site you did provide though the rendered content in the tabs is ... so I’m not sure what is going on there. There may be some CSS that is using display: none; somewhere hiding it all.

    Thread Starter r3dy06

    (@r3dy06)

    The …is intentional I’m just troubleshooting.

    Moderator bcworkz

    (@bcworkz)

    Jose hit on it. You have .tab-content with a display: none; rule that is hiding all content. It’s at line 5411 of style.css. If you remove that rule, the .tab-pane with class .active will be able to display while the rest without .active will remain hidden.

    I’d suggest you place unique content in each tab instead of the same for all so you can visually confirm the tabs are switching properly.

    Thread Starter r3dy06

    (@r3dy06)

    Thank you guys so much. I can’t believe I wasn’t able to find that. I even paid for support from the developers of my WP theme and they couldn’t help either. What an easy fix. You guys rock!

    Moderator bcworkz

    (@bcworkz)

    We’re always happy to help 🙂

    If I’m understanding where this came from correctly, it’s an example in documentation and not actually part of the theme. If it’s not part of the theme, to be fair, the devs could be excused for not knowing the cure. It’s more of a faulty documentation issue.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Bootstrap Tabs Not Working’ is closed to new replies.