Repost: Need help with Bootstrap tabs not working as intended

Code Feedback
1

So with my portfolio I have 3 tabs at the top of the page, “about”, “portfolio” and “contact me” which separates the content of the page into those three categories.

The navbar buttons successfully hide the other two tab’s content when you click on one, but I’d like content of the webpage to adjust so it is displayed at the top of the page as it does on the bootstrap tabs example which can be found here

As you can see from my portfolio the content doesn’t adjust it’s position based on what’s visible and I wanted to know how to do that.

Hopefully someone can help me! I don’t really know what to do.

2 
  $("a.nav-link").on('click',function(){
    $(".tab-pane").hide();
    $($(this).attr("href")).show();
  });

This should work.

Tabs might not be the best option here. Especially since you want the links to be in a navigation bar. You could use a normal navigation with three divs (#about, #portfolio, #contact) and then on click hide all of them and show the one being clicked.

1 Like
3

That works perfectly thank you so much!

I wanted to use tabs partially for the aesthetic, is it bad practice to have done what I’ve done?

1 Like
4

Glad it worked. Not bad at all, just use what works best for you.

1 Like
5

Just as a quick question, did you know how to do that from having done more of the course or is there some outside reading that I should aim to do?

6

The course gives you the basics, so you will not need to figure most things out by yourself. If you google a problem, you will most likely find an answer or a tutorial or something. And you can of course ask all your questions here :slight_smile:. If you want to learn more about jQuery, I can recommend this course.

1 Like
7

Thank you.

Also is there a way so that my about section is selected by default with your fix? as it stands currently nothing is selected by default despite my about section having the a class “active”

8

The only thing that needs a class of “active” is the <li>:

<li class="nav-item active">
    <a class="nav-link" data-toggle="tab" href="#about" role="tab">About me</a>
</li>
9

$( document ).ready(function() {

$(".tab-pane").css("display", "none");
$("#about").css("display", "block");


$("a.nav-link").on('click',function(){
$(".tab-pane").css("display", "none");
$($(this).attr("href")).show();

});
});

If you change your JS to this, it will also remove the empty space at the bottom.

1 Like
10

You’re my hero Ben!, I was about to link images to show you what I meant but you fixed it before I could.

Thank you so much for your help!

1 Like
11

thank you ben,
but, what if we use multilevel tabs or pills