Highlighted

Adding additional tabs from bootstrap tabs

Community Beginner ,
Sep 24, 2017

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

766

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Adding additional tabs from bootstrap tabs

Community Beginner ,
Sep 24, 2017

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

767

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 24, 2017 0
Adobe Community Professional ,
Sep 24, 2017

Copy link to clipboard

Copied

<!--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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2017 2
Community Beginner ,
Sep 24, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2017 0
Adobe Community Professional ,
Sep 24, 2017

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2017 2
Community Beginner ,
Sep 24, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2017 0
Adobe Community Professional ,
Sep 24, 2017

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2017 0