Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Why is the content of the first tab replaced after clicking to another tab?

This question has to do with Bootstrap nav tabs. I have a set of Bootstrap tabs, but if I click away from the first tab to another tab and then back to the first tab, the content of the first tab is replaced with the content of the last clicked tab. I have no idea why this is happening and cannot find a solution to the problem.

I've already done a bunch of googling and can't find any solution. Here is the code:

<div class="col">
    <h3>Account Settings</h3>
    <ul class="nav nav-tabs mt-4" id="settingsTabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="account-tab" data-toggle="tab" href="#account" role="tab" aria-controls="account" aria-selected="true">Account</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#followers" role="tab" aria-controls="followers" aria-selected="false">Followers</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#following" role="tab" aria-controls="following" aria-selected="false">Following</a>
      </li>
    </ul>

    <div class="tab-content" id="settingsContent">

     <div class="tab-pane fade show active" id="account" role="tabpanel" aria-labelledby="account-tab">
         <div class="mt-5">
             <h4>Change Username</h4>
             <form action="/account" method="POST">
                 <div class="row">
                     <div class="col-6">
                         <input type="text" class="form-control" name="newUsername" placeholder="New Username" />
                     </div>
                 </div>
                 <div class="row">
                     <div class="col-6 pb-5 border-bottom">
                         <input type="text" class="form-control mt-3" name="confirmUsername" placeholder="Confirm Username" />
                         <input type="submit" class="btn btn-sm btn-secondary mt-2" value="Save" />
                     </div>
                 </div>
             </form>
         </div>
         <div class="mt-5">
             <h4>Change Password</h4>
             <form action="/account" method="POST">
                 <div class="row">
                     <div class="col-6">
                         <input type="password" class="form-control" name="newPassword" placeholder="New Password" />
                     </div>
                 </div>
                 <div class="row">
                     <div class="col-6 pb-5 border-bottom">
                         <input type="password" class="form-control mt-3" name="confirmPassword" placeholder="Confirm Password" />
                         <input type="submit" class="btn btn-sm btn-secondary mt-2" value="Save" />
                     </div>
                 </div>
             </form>
         </div>
     </div>

     <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
        <div>
            This is the settings tab
        </div>
     </div>

     <div class="tab-pane fade" id="followers" role="tabpanel" aria-labelledby="followers-tab">
        This is the followers tab
     </div>

     <div class="tab-pane fade" id="following" role="tabpanel" aria-labelledby="following-tab">
        This is the following tab
     </div>

  </div>
</div>

This is super frustrating. Help would be greatly appreciated!

1 Answer

Ryan Purcell
Ryan Purcell
13,599 Points

I took your code and put it in a jsfiddle https://jsfiddle.net/1zk7p0ow/ and it worked. Do you have your JavaScript set up correctly (jQuery loaded first and then Bootstrap.js next)?