cancel
Turn on suggestions
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0
Upvote

Adding additional tabs from bootstrap tabs

xxPoLyGLoTxx
Community Beginner ,
Sep 24, 2017 Sep 24, 2017

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.

1.3K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Nancy OShea Community Expert
Community Expert , Sep 24, 2017 Sep 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-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7o

...
Translate
replies 5 Replies 5
latest latest Jump to latest reply
Nancy OShea Community Expert
Community Expert ,
Sep 24, 2017 Sep 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 & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
xxPoLyGLoTxx
Community Beginner ,
Sep 24, 2017 Sep 24, 2017
In Response To Nancy OShea

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Sep 24, 2017 Sep 24, 2017
In Response To xxPoLyGLoTxx

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 & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
xxPoLyGLoTxx
Community Beginner ,
Sep 24, 2017 Sep 24, 2017
In Response To Nancy OShea

Nancy,

That DID work when pasted into a blank document! Thanks for your help; I will modify it to make it work for my needs.

I will mark your answer correct.

Best wishes,
Kalif

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Nancy OShea Community Expert
Community Expert ,
Sep 24, 2017 Sep 24, 2017
LATEST
In Response To xxPoLyGLoTxx

Just don't forget to add data-toggle="tab" to each link.

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices