I want to make a button show an accordion collapse. Is this the right way to do it? It’s not working for me.
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
...
<button id="expand-all" class="btn btn-primary">Expand all (clicking will expand every card-body class)</button>
...
<script>
$(document).ready(function(){
$("#expand-all").click(function(){
$(".collapseThree").collapse('show');
});
})
</script>
Not sure what .collapse() is supposed to be, but it isn’t a jquery method. If you want to toggle a class you can use toggle.
Edit: The is also a show method and seeing as how you have a collapse class maybe you just switched the two?
$(".collapseThree").show('collapse');
1 Like
You mean like this?
$(document).ready(function(){
$("#expand-all").click(function(){
$(".collapseThree").collapse({
toggle: false
});
});
})
It’s like in the manual but it isn’t working.
Oh, it’s a Bootstrap method, my bad.
-
Make sure you have added the script https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js to the page after jQuery.
-
You do not have an element with a .collapseThree class, you have an id. So the selector should be #collapseThree.
-
I don’t know if there is HTML missing from the code you posted, but the data-parent="#accordionExample" will cause an error without that parent element.
<div id="collapseThree" class="collapse" aria-labelledby="headingThree">
<div class="card-body">
</div>
</div>
<button id="expand-all" class="btn btn-primary">Expand all</button>
$(document).ready(function () {
$("#expand-all").click(function () {
$("#collapseThree").collapse("show");
});
});
1 Like
It’s just not working even when I remove the click and do it on page load…
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link href="css/styles.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<div class="container-sm">
<div class="row-content justify-content-md-center">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#SliderTab" data-toggle="tab" role="tab" aria-controls="SliderTab" aria-selected="true">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#TextAreaTab" data-toggle="tab" role="tab" aria-controls="TextAreaTab" aria-selected="false">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true" data-toggle="tab" role="tab" aria-controls="home">Disabled</a>
</li>
</ul>
</div>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="SliderTab" role="tabpanel" aria-labelledby="SliderTab">
<div class="card-body" >
<h5 class="card-title">Choose Option</h5>
<p class="card-text">Time remaining 00:00</p>
<form>
<div class="form-group">
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
<div class="col">
<label for="formControlRange">I choose this option</label>
<input type="range" class="form-control-range" min="0" max="5" id="formControlRange">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link card-button" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Buggs Bunny guessed outcome #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed card-button" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Elmer Pud guessed outcome #4
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button id="collapseThreeBtn" class="btn btn-link collapsed card-button" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Road Runner guessed outcome #1
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
<div id="expand-all" class="btn btn-primary expand-all">Expand all (clicking will expand every card-body class)</div>
</div>
</div>
<div class="tab-pane fade" id="TextAreaTab" role="tabpanel" aria-labelledby="TextAreaTab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
<p>add pagination here</p>
</div>
</div>
<div class="row justify-content-md-center">
</div>
</div>
<!-- Optional JavaScript -->
<script>
$(document).ready(function(){
$("#expand-all").click(function(){
$("#collapseThree").collapse('toggle');
$( "<p>Test</p>" ).appendTo( ".collapseThree" );
});
})
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Try moving your code below the script files being loaded on the page.
1 Like
It worked like magic! Web-dev is just so messy, omg… who would have thought the script doesn’t go where the example file says it should…