Skip to main content
X
xxPoLyGLoTxx
Participant
September 24, 2017
Answered

Adding additional tabs from bootstrap tabs

  • September 24, 2017
  • 1 reply
  • 1463 views

Hi,

I'm new to DreamWeaver but have coding knowledge.

Problem: Inserting bootstrap tabs results in 2 tabs, and 1 dropdown tab. I want the third tab to NOT be a dropdown tab.

Things I've tried: I have tried copying / pasting the 2nd tab into the 3rd tab location. The problem is that it is still linked to the prior content that the 2nd tab is linked to. I have also tried modifying the dropdown tab to remove the dropdown links, but it doesn't work the way I want. I have also tried using JQuery UI tabs, but wow, it lays them out vertically and the content is lined up vertically. The nice thing is that with JQuery you can add and remove tabs easily with the Properties panel (finally figured that out), but the display is terrible for my needs. I want 3 tabs arranged horizontally that each are linked to 3 separate content areas AND I want the ability to add more tabs in the future.

Is there any way to combine the functionality of the JQuery UI Tabs with the layout of the Bootstrap Tabs?

Thanks for any help.

This topic has been closed for replies.
Correct answer Nancy OShea

Copy & paste this code into a new, blank document and try it in your browser.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7 Starter</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

<body>

<div class="container">

<ul class="nav nav-tabs">

<li class="active"><a data-toggle="tab" href="#home">Home</a></li>

<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>

<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>

</ul>

<div class="tab-content">

<div id="home" class="tab-pane fade in active">

<h3>HOME</h3>

<p>Some content.</p>

</div>

<div id="menu1" class="tab-pane fade">

<h3>Menu 1</h3>

<p>Some content in menu 1.</p>

</div>

<div id="menu2" class="tab-pane fade">

<h3>Menu 2</h3>

<p>Some content in menu 2.</p>

</div>

</div>

</div>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Bootstrap-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
September 24, 2017

<!--Basic Tab Menu-->:

<ul class="nav nav-tabs">

<li class="active"><a href="#">Home</a></li>

<li><a href="#">Menu 1</a></li>

<li><a href="#">Menu 2</a></li>

<li><a href="#">Menu 3</a></li>

</ul>

<!-- Tab Panel Content-->

<div class="tab-content">

  <div id="home" class="tab-pane fade in active">

    <h3>HOME</h3>

    <p>Some content.</p>

  </div>

  <div id="menu1" class="tab-pane fade">

    <h3>Menu 1</h3>

    <p>Some content in menu 1.</p>

  </div>

  <div id="menu2" class="tab-pane fade">

    <h3>Menu 2</h3>

    <p>Some content in menu 2.</p>

  </div>

<div id="menu3" class="tab-pane fade">

    <h3>Menu 3</h3>

    <p>Some content in menu 3.</p>

  </div>

</div>

Nancy

Nancy O'Shea— Product User & Community Expert
    X
    xxPoLyGLoTxxAuthor
    Participant
    September 24, 2017

    Nancy,

    That's helpful! I can see how to add buttons and content, but the only content being displayed is the "Home" button, which I am assuming is related to the "active" tag.

    But I still have a problem: The menu 1-3 buttons do not currently display the content you have up above (e.g., "Some content in menu 1", "Some content in menu 2", etc.) does not appear upon the mouse click. I tried changing the href to the DIV id for each button/content but that did not work.

    I will keep working at it, but I am curious as to how to only have the respective button's content showing at one time (and not always just showing the 'home' button content).

    Thanks again.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    September 24, 2017

    Copy & paste this code into a new, blank document and try it in your browser.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 3.3.7 Starter</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Latest compiled and minified Bootstrap CSS-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    </head>

    <body>

    <div class="container">

    <ul class="nav nav-tabs">

    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>

    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>

    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>

    </ul>

    <div class="tab-content">

    <div id="home" class="tab-pane fade in active">

    <h3>HOME</h3>

    <p>Some content.</p>

    </div>

    <div id="menu1" class="tab-pane fade">

    <h3>Menu 1</h3>

    <p>Some content in menu 1.</p>

    </div>

    <div id="menu2" class="tab-pane fade">

    <h3>Menu 2</h3>

    <p>Some content in menu 2.</p>

    </div>

    </div>

    </div>

    <!--latest jQuery 3-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Bootstrap-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices