Twitter Bootstrap button click to toggle expand/collapse text section above button
Based on the doc
<div class="row">
<div class="span4 collapse-group">
<h2>Heading</h2>
<p class="collapse">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
$('.row .btn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $collapse = $this.closest('.collapse-group').find('.collapse');
$collapse.collapse('toggle');
});
Working demo.
Twitter bootstrap collapse: change display of toggle button
try this. http://jsfiddle.net/fVpkm/
Html:-
<div class="row-fluid summary">
<div class="span11">
<h2>MyHeading</h2>
</div>
<div class="span1">
<button class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
</div>
</div>
<div class="row-fluid summary">
<div id="intro" class="collapse">
Here comes the text...
</div>
</div>
JS:-
$('button').click(function(){ //you can give id or class name here for $('button')
$(this).text(function(i,old){
return old=='+' ? '-' : '+';
});
});
Update With pure Css, pseudo elements
http://jsfiddle.net/r4Bdz/
Supported Browsers
button.btn.collapsed:before
{
content:'+' ;
display:block;
width:15px;
}
button.btn:before
{
content:'-' ;
display:block;
width:15px;
}
Update 2 With pure Javascript
http://jsfiddle.net/WteTy/
function handleClick()
{
this.value = (this.value == '+' ? '-' : '+');
}
document.getElementById('collapsible').onclick=handleClick;
Bootstrap: Collapse other sections when one is expanded
Using data-parent, first solution is to stick to the example selector architecture
<div id="myGroup">
<button class="btn dropdown" data-toggle="collapse" data-target="#keys" data-parent="#myGroup"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right">X</span></button>
<button class="btn dropdown" data-toggle="collapse" data-target="#attrs" data-parent="#myGroup"><i class="icon-chevron-right"></i> Attributes</button>
<button class="btn dropdown" data-toggle="collapse" data-target="#edit" data-parent="#myGroup"><i class="icon-chevron-right"></i> Edit Details</button>
<div class="accordion-group">
<div class="collapse indent" id="keys">
keys
</div>
<div class="collapse indent" id="attrs">
attrs
</div>
<div class="collapse" id="edit">
edit
</div>
</div>
</div>
Demo (jsfiddle)
Second solution is to bind on the events and hide the other collapsible elements yourself.
var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function() {
$myGroup.find('.collapse.in').collapse('hide');
});
Demo (jsfiddle)
PS: the strange effect in the demos is caused by the min-height set for the example, just ignore that.
Edit: changed the JS event from show to show.bs.collapse as specified in Bootstrap documentation.
Bootstrap collapse change button to read less on click
I managed to solve it using an answer from:
jQuery: Change button text on click
Thanks for the replies anyway!
Bootstrap collapse section and expand another with one button
Check the JSFiddle :- JSFiddle
$("#advanced").addClass('hide');
$(".button").click(function(){
$("#advanced").toggleClass('hide');
$("#general").toggleClass('hide');
if($(this).attr("value") == "Advanced"){
$(this).attr("value","General");
}
else if($(this).attr("value") == "General"){
$(this).attr("value","Advanced");
}
});
Bootstrap 4 Expand All / Collapse All button doesn't work when collapse element already showing
In your code you are using slideToggle() this will add css display:none or display:block to your element so even if you use removeClass("show") that style is still there in your elements . So, you can use .hide() or .show() whenever your collapse all link is clicked.
Demo Code :
//show or collapse all
$("#expand-all").on("click", function(e) {
if (this.text === "Expand All") {
this.text = "Collapse All";
$(".collapse").each(function() {
if (!$(this).hasClass("show")) {
$(this).addClass("show");
}
$(".category_carat").each(function() {
this.innerHTML = '<i class="fa fa-caret-down"></i>';
});
$(".subcategory_carat").each(function() {
this.innerHTML = '<i class="fa fa-minus-circle"></i>';
});
$(".table_carat").each(function() {
//show all tables...
$(this).closest(".find-table").find(".table-show").show()
this.innerHTML = '<i class="fa fa-minus-circle"></i>';
});
});
} else {
this.text = "Expand All";
$(".collapse").each(function() {
if ($(this).hasClass("show")) {
$(this).removeClass("show")
}
$(".category_carat").each(function() {
this.innerHTML = '<i class="fa fa-caret-right"></i>';
});
$(".subcategory_carat").each(function() {
this.innerHTML = '<i class="fa fa-plus-circle"></i>';
});
$(".table_carat").each(function() {
//hide all tables...
$(this).closest(".find-table").find(".table-show").hide()
this.innerHTML = '<i class="fa fa-plus-circle"></i>';
});
});
}
});
//show or collapse categories
$(".category_carat").click(function() {
$(this).closest(".card").find(".categories-show").slideToggle();
//console.log($(this).closest(".card").find(".show-cat"));
if (this.innerHTML === '<i class="fa fa-caret-down"></i>') {
this.innerHTML = '<i class="fa fa-caret-right"></i>';
} else {
this.innerHTML = '<i class="fa fa-caret-down"></i>';
}
});
$(".subcategory_carat").click(function() {
$(this).closest(".card").find(".subCategories-show").slideToggle();
if (this.innerHTML === '<i class="fa fa-plus-circle"></i>') {
this.innerHTML = '<i class="fa fa-minus-circle"></i>';
} else {
this.innerHTML = '<i class="fa fa-plus-circle"></i>';
}
});
$(".table_carat").click(function() {
$(this).closest(".find-table").find(".table-show").slideToggle();
if (this.innerHTML === '<i class="fa fa-plus-circle"></i>') {
this.innerHTML = '<i class="fa fa-minus-circle"></i>';
} else {
this.innerHTML = '<i class="fa fa-plus-circle"></i>';
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js">
</script>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-right"><a id="expand-all" href="javascript:void(0);">Expand All</a></div>
</div>
<div class="row">
<div class="col">
<div class="card mb-3">
<div class="card-header justify-content-between d-flex align-items-center text-white bg-info">
<h4>Wildlife</h4>
<a class="category_carat"><i class="fa fa-caret-right"></i></a>
</div>
<div class="card-body">
<div class="row">
<div class="col-md order-2 order-md-1 mt-4 mt-md-0">
<div class="collapse categories-show">
<div class="row">
<div class="col-md order-2 order-md-1 mt-4 mt-md-0">
<h5 class="card-title"> <a href="#subCategories-show" class="subcategory_carat" data-toggle="collapse"><i class="fa fa-plus-circle"></i></a> Mammal Biodiversity</h5>
</div>
</div>
<div class="find-table">
<div class="row ml-4">
<div class="col">
<div class="collapse subCategories-show">
<h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Brook Trout"><i class="fa fa-plus-circle"></i></a> Brook Trout</h5>
</div>
</div>
</div>
<div class="row ml-4">
<div class="col">
<div class="collapse table-show">
<div class="table-responsive">
<table id="studyTableBrookTrout" class="table table-striped study-table" value="Brook Trout" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Study</th>
<th>Indicator Categories</th>
<th>Years</th>
<th>Org</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="find-table">
<div class="row ml-4">
<div class="col">
<div class="collapse subCategories-show">
<h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Moose Population"><i class="fa fa-plus-circle"></i></a> Moose Population</h5>
</div>
</div>
</div>
<div class="row ml-4">
<div class="col">
<div class="collapse table-show">
<div class="table-responsive">
<table id="studyTableMoosePopulation" class="table table-striped study-table" value="Moose Population" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Study</th>
<th>Indicator Categories</th>
<th>Years</th>
<th>Org</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="find-table">
<div class="row ml-4">
<div class="col">
<div class="collapse subCategories-show">
<h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Little Northern Squirrel"><i class="fa fa-plus-circle"></i></a> Little Northern Squirrel</h5>
</div>
</div>
</div>
<div class="row ml-4">
<div class="col">
<div class="collapse table-show">
<div class="table-responsive">
<table id="studyTableLittleNorthernSquirrel" class="table table-striped study-table" value="Little Northern Squirrel" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Study</th>
<th>Indicator Categories</th>
<th>Years</th>
<th>Org</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>How to collapse and collapse in two different div sections based on two different button clicks?
Just wrap both your div sections in a .panel and then in a parent container with an id. Then add the id as a data-parent attribute to your divs
<div id="parent">
<div class="panel">
<div id="select" class="collapse" data-parent="#parent">
Select your option
</div>
</div>
<div class="panel">
<div id="add" class="collapse panel" data-parent="#parent">
Add your option
</div>
</div>
</div>
Fiddle - https://jsfiddle.net/dszc5q5r/
Bootstrap 3 Toggle Changing button text and icon on toggle
I think you can use javascript and listen for the collapse events rather than using the html data tags to resolve this issue. Something like this should do the trick:
JS
$('#starting-paragraph, .collapse-btn').click( function () {
$('#intro-text').collapse('toggle');
});
$('#intro-text').on('hidden.bs.collapse', function () {
$('.collapse-btn').addClass("collapsed");
});
$('#intro-text').on('shown.bs.collapse', function () {
$('.collapse-btn').removeClass("collapsed");
});
Here's a new fiddle with it working: http://jsfiddle.net/o0pLgy6c/
Related Topics
Adding a Background Video with React
Get Document.Stylesheets by Name Instead of Index
How to Make Each Letter in Text a Different Random Color in JavaScript
D3 Bar Chart Not Showing First Element in Array
JavaScript Style.Display="None" or Jquery .Hide() Is More Efficient
How to Reasonably Animate Font Awesome Lock Icons
Get the Computed Style and Omit Defaults
Get Pixelcolor of CSS Background Image
Detect Scale Settings (Dpi) with JavaScript or CSS
Add CSS3 Support to IE7+ with JavaScript
How Much of an Effect Can Different Operating Systems Have on Displaying Web Pages
After Content Update from Ajax Jquery Not Work Properly
CSS JavaScript Style Sheet Disabled
Css3 Replacement for Jquery.Fadein and Fadeout
Highlight Active Menu Item on Scroll
Make the Change of "Active" Class in the Menu More Reliable When Scrolling
Bootstrap 4: Why Popover Inside Scrollable Dropdown Doesn't Show