Highlighted

Bootstrap tab and Pills [toggle collapse]

Explorer ,
Oct 23, 2017

Copy link to clipboard

Copied

Please see the following code to took from the Bootstrap website. Currently if you click the button, the content toggles down. What code do I need to apply so when I click the button and to make it toggles back an disappears?

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

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

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

  <ul class="nav nav-pills">

    <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>

  </ul>

    <div class="tab-content">

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

      <h3>Menu 3</h3>

      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    </div>

  </div>

</div>

</body>

</html>

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

What you want is data-toggle="collapse" 

Bootstrap JS Collapse Reference

Example:

<div class="container">

  <h2>Expand and Collapse with different icons</h2>

    <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#demo">

      <span class="glyphicon glyphicon-collapse-down"></span> Open

    </button>

  <div id="demo" class="collapse">

    Lorem ipsum dolor sit amet, consectetur adipisicing elit,

    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  </div>

</div>

<script>

//toggle collapse & change icon

$(document).ready(function(){

  $("#demo").on("hide.bs.collapse", function(){

    $(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');

  });

  $("#demo").on("show.bs.collapse", function(){

    $(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');

  });

});

</script>

TOPICS
Create menus in Dreamweaver

Views

4.3K

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

Bootstrap tab and Pills [toggle collapse]

Explorer ,
Oct 23, 2017

Copy link to clipboard

Copied

Please see the following code to took from the Bootstrap website. Currently if you click the button, the content toggles down. What code do I need to apply so when I click the button and to make it toggles back an disappears?

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

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

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

  <ul class="nav nav-pills">

    <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>

  </ul>

    <div class="tab-content">

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

      <h3>Menu 3</h3>

      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    </div>

  </div>

</div>

</body>

</html>

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

What you want is data-toggle="collapse" 

Bootstrap JS Collapse Reference

Example:

<div class="container">

  <h2>Expand and Collapse with different icons</h2>

    <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#demo">

      <span class="glyphicon glyphicon-collapse-down"></span> Open

    </button>

  <div id="demo" class="collapse">

    Lorem ipsum dolor sit amet, consectetur adipisicing elit,

    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  </div>

</div>

<script>

//toggle collapse & change icon

$(document).ready(function(){

  $("#demo").on("hide.bs.collapse", function(){

    $(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');

  });

  $("#demo").on("show.bs.collapse", function(){

    $(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');

  });

});

</script>

TOPICS
Create menus in Dreamweaver

Views

4.3K

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
Oct 23, 2017 0
LEGEND ,
Oct 23, 2017

Copy link to clipboard

Copied

Not sure what you are trying to do but see if something in the examples at the follwing link would be of use:

Bootstrap Tabs and Pills

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...
Oct 23, 2017 0
Explorer ,
Oct 23, 2017

Copy link to clipboard

Copied

Thanks for your reply. To clearify, when I click on the button "MENU 3", the content below toggles down. Now I want to click on the bottom "MENU 3" again to make the content toggle upwards . Is that possible?

Menu 3

Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

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...
Oct 23, 2017 0
Explorer ,
Oct 23, 2017

Copy link to clipboard

Copied

I found an example on the Sonos website (see link below).  Please scroll down to the section where it says "

44 music services available"

when you click the symbol "+", the logos appears and when you click the symbol, now "X", it disappears. I'm looking to have the same effect with y bootstrap version.

One: The Smart Speaker for Music Lovers | Sonos

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...
Oct 23, 2017 0
Adobe Community Professional ,
Oct 23, 2017

Copy link to clipboard

Copied

What you want is data-toggle="collapse" 

Bootstrap JS Collapse Reference

Example:

<div class="container">

  <h2>Expand and Collapse with different icons</h2>

    <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#demo">

      <span class="glyphicon glyphicon-collapse-down"></span> Open

    </button>

  <div id="demo" class="collapse">

    Lorem ipsum dolor sit amet, consectetur adipisicing elit,

    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  </div>

</div>

<script>

//toggle collapse & change icon

$(document).ready(function(){

  $("#demo").on("hide.bs.collapse", function(){

    $(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');

  });

  $("#demo").on("show.bs.collapse", function(){

    $(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');

  });

});

</script>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

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...
Oct 23, 2017 1
LEGEND ,
Oct 23, 2017

Copy link to clipboard

Copied

iangoulbourne  wrote

I found an example on the Sonos website (see link below).  Please scroll down to the section where it says "

44 music services available"

when you click the symbol "+", the logos appears and when you click the symbol, now "X", it disappears. I'm looking to have the same effect with y bootstrap version.

One: The Smart Speaker for Music Lovers | Sonos

I don't do Bootystrap myself but below is an example of how I might go about doing something like the url you provided, without Bootystrap:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Open/Close</title>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<script>

$(document).ready(function(){

$('.show').hide();

$('.toggle').css('cursor' , 'pointer').click(function(){

var state = $('.toggle').html();

if(state === '<i class="fa fa-times-circle"></i>') {

state = '<i class="fa fa-plus-circle"></i>';

}

else {

state = '<i class="fa fa-times-circle"></i>';

}

$('.toggle').html(state);

$('.show').slideToggle();

});

});

</script>

<style>

.wrapper {

width: 40%;

margin: 0 auto;

text-align: center;

}

.fa {

font-size: 30px;

}

</style>

</head>

<body>

<div class="wrapper">

<div class="toggle"><i class="fa fa-plus-circle"></i>

</div>

<div class="show"><p>Content goes here.</p></div>

</div>

</body>

</html>

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...
Oct 23, 2017 1
Explorer ,
Oct 24, 2017

Copy link to clipboard

Copied

Thank you all for your help. I will apply these styles to my design. They worked great.

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...
Oct 24, 2017 0