Bootstrap tab and Pills [toggle collapse]

Report · Oct 23, 2017

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>

<head>

<title>Bootstrap Example</title>

</head>

<body>

</ul>

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

</div>

</body>

</html>

Report · Oct 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

Report · Oct 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.

Report · Oct 23, 2017

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

Report · Oct 23, 2017

What you want is data-toggle="collapse"

Bootstrap JS Collapse Reference

Example:

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

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

</button>

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>

//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— Product User, Community Expert & Moderator

Report · Oct 23, 2017

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>

<title>Open/Close</title>

$(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>

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

</div>

</body>

</html>

Report · Oct 24, 2017

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

Bootstrap tab and Pills [toggle collapse]

1 Correct answer

Menu 3

44 music services available"

44 music services available"