Skip to main content
I
iangoulbourne
Known Participant
October 23, 2017
Answered

Bootstrap tab and Pills [toggle collapse]

  • October 23, 2017
  • 2 replies
  • 6134 views

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>

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

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>

2 replies

I
iangoulbourneAuthor
Known Participant
October 24, 2017

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

O
osgood_
Legend
October 23, 2017

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

I
iangoulbourneAuthor
Known Participant
October 23, 2017

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices