Accordion, how to automatically collapse one and expand next - javascript

I have an accordion with three "panels" First one is expanded on inital load.
The first panel have an input field. When the user has updated this field I would like to automatically expand the next panel and collapse the current panel.
The accordion it self works as expected ( I have jquery avaiable on the page).
I have searched and only found examples of expanding/collapsing by clicking on a link/button.
How do I do that?
This is my code:
$(document).ready(function() {
// Add minus icon for collapse element which is open by default
$(".collapse.in").each(function() {
$(this).siblings(".panel-heading").find(".glyphicon").addClass("rotate");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function() {
$(this).parent().find(".glyphicon").addClass("rotate");
}).on('hide.bs.collapse', function() {
$(this).parent().find(".glyphicon").removeClass("rotate");
});
});
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span
class="glyphicon glyphicon-menu-right"></span> Text</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div class="col-sm-3">
<label for="text">Text</label>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-8">
<input type="text" class="form-control" id="textfield" ng-model="textfield" ng-blur="c.updatedField()">
<br />
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span
class="glyphicon glyphicon-menu-right"></span> More text</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<h4 class="panel-title">More text</h4>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span
class="glyphicon glyphicon-menu-right"></span> Even more text</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<h4 class="panel-title">More text</h4>
</div>
</div>
</div>
</div>
</div>

you could find a working solution in this snippet. The idea is to manually manipulate the bootstrap collapse elements.
$(document).ready(function() {
// Add minus icon for collapse element which is open by default
$(".collapse.in").each(function() {
$(this).siblings(".panel-heading").find(".glyphicon").addClass("rotate");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function() {
$(this).parent().find(".glyphicon").addClass("rotate");
}).on('hide.bs.collapse', function() {
$(this).parent().find(".glyphicon").removeClass("rotate");
});
});
$(document).on("change", "#textfield", function(){
$("#collapseOne").collapse('hide');
$("#collapseTwo").collapse('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span
class="glyphicon glyphicon-menu-right"></span> Text</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<div class="col-sm-3">
<label for="text">Text</label>
</div>
<div class="col-sm-1"></div>
<div class="col-sm-8">
<input type="text" class="form-control" id="textfield" ng-model="textfield" ng-blur="c.updatedField()">
<br />
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span
class="glyphicon glyphicon-menu-right"></span> More text</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<h4 class="panel-title">More text</h4>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span
class="glyphicon glyphicon-menu-right"></span> Even more text</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<h4 class="panel-title">More text</h4>
</div>
</div>
</div>
</div>
</div>

Related

How do you get this div element to appear after button.addEventListener is pressed?

Basically I am trying to use Bootstrap's accordion drop-down menus to appear when a player is searched up after the button is pressed. Here is my code:
<form>
<div class="userContainer">
<button id="submitButton"><i class="fi-xnsuxl-search"></i></button>
<input class = "form-control" id = "displayUsers" type = "text" placeholder="Username/UUID" aria-label = "Search">
</div>
</form>
<br />
<div class="row">
<div class="column">
<div class="container-fluid">
<div id="skin_container"></div>
</div>
</div>
</div>
<br /> <br />
<div class="container-fluid">
<div class="panel-group" id="faqAccordion">
<div class="panel panel-default ">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question0">
<h4 class="panel-title">
BuildUHC
</h4>
</div>
<div id="question0" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary"><div class = "container-stats-1"></div></span></h5>
</div>
</div>
</div>
<div class="panel panel-default ">
<div class="panel-heading accordion-toggle collapsed question-toggle" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question1">
<h4 class="panel-title">
Combo
</h4>
</div>
<div id="question1" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary"><div class = "container-stats-2"></div></span></h5>
</div>
</div>
</div>
<div class="panel panel-default ">
<div class="panel-heading accordion-toggle collapsed question-toggle" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question2">
<h4 class="panel-title">
Potion
</h4>
</div>
<div id="question2" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary"><div class = "container-stats-3"></span></h5>
</div>
</div>
</div>
<div class="panel panel-default ">
<div class="panel-heading accordion-toggle collapsed question-toggle" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question3">
<h4 class="panel-title">
Parkour
</h4>
</div>
<div id="question3" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary"><div class = "container-stats-4"></span></h5>
</div>
</div>
</div>
</div>
<!--/panel-group-->
</div>
I have it setup in JavaScript as:
const button = document.getElementById("submitButton");
button.addEventListener("click", fetchUser);
fetchUser is the function I created to display data when it fetches from the API it's using. I want it to basically show the container-fluid div when it is pressed and fetches data, not at the start of the page. It would also be nice to have an "Error: Not a valid player" message show up if the API doesn't find anybody, but that's another issue for another time I suppose.
Hopefully you can help me out,
Thanks.

Nested bootstrap collapse onclick event

I'm new to bootstraps and coding altogether, so I am currently trying to open my main bootstrap panel with an onclick -event which contains nested sub panels.
This is my index.html containing the panels and the button;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form onsubmit="return false" id="searchForm">
<input type="button" value="Search" id="search" class="openPanel" />
</form>
<br/><br/>
<div class="container">
<div class="panel-groupMain">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Main panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!-- Sub panels -->
<div class="panel-group" id="accordion">
<!-- Sub panel 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentOne"></p>
</div>
</div>
</div>
<!-- Sub panel 2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div class="day" data-name="Tuesday"></div>
<p id="contentTwo"></p>
</div>
</div>
</div>
<!-- Sub panel 3 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 3</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFive"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I've tried this code for opening the main -panel but I can't get this to work;
<script type="text/javascript">
$(document).ready(function () {
$("#search").on("click", function () {
$(this).closest('.panel-heading').find('.collapse').collapse('show');
});
});
</script>
So as for my question, is there any easy and effective way to only open the main -panel with the button click and after it's opened the button won't affect the panel anymore?
Thanks.
Here you go with a solution https://jsfiddle.net/hbfvta27/
$(document).ready(function () {
$("#search").on("click", function () {
if( !$('.collapse').first().hasClass('in'))
$('a[data-toggle="collapse"]').first().click();
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form onsubmit="return false" id="searchForm">
<input type="button" value="Search" id="search" class="openPanel" />
</form>
<br/><br/>
<div class="container">
<div class="panel-groupMain">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Main panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!-- Sub panels -->
<div class="panel-group" id="accordion">
<!-- Sub panel 1 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Sub panel 1</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentOne"></p>
</div>
</div>
</div>
<!-- Sub panel 2 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Sub panel 2</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div class="day" data-name="Tuesday"></div>
<p id="contentTwo"></p>
</div>
</div>
</div>
<!-- Sub panel 3 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Sub panel 3</a>
<span class="indicator glyphicon glyphicon-chevron-down pull-right"></span>
</h4>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body">
<p id="contentFive"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hope this will help you.
just add a class named 'in' on click of a bootstrap panel I hope it will help you
$(document).ready(function () {
$(".panel-groupMain").on("click", function () {
$(this).find('#collapse1').toggleClass('in');
});
});

Bootstrap Collapse not automatically collapsing

I just inserted a Bootstrap collapse into my payment view in Laravel. The Bootstrap collapses when I click on it, But I want it to be collapsed automatically.
I know I have to set this: aria-expanded="false"
But its still not working. Maybe because it has its own id like this?
href="#collapse{{ $charity->id }}"
Here is my full panel snippet:
#foreach($charities as $charity)
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ $charity->id }}" aria-expanded="false" aria-controls="collapseOne">
<div class="row">
<div class="col-xs-3 col-sm-2 col-md-2">
<img class="media-object" src="{{ $charity->photo }}" width="75px" height="65px" alt="{{ $charity->name }}">
</div>
<div class="col-xs-9 col-sm-10 col-md-10">
{{ $charity->name }}
</div>
</div>
</a>
</h4>
</div>
<div id="collapse{{ $charity->id }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
{{ $charity->description }}
</div>
</div>
</div>
</div>
#endforeach
If you want the first panel closed on page load, remove the .in class from it.
From this --> <div id="collapse{{ $charity->id }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
To this --> <div id="collapse{{ $charity->id }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
The collapse plugin utilizes a few classes to handle the heavy
lifting:
.collapse hides the content
.collapse.in shows the content
.collapsing is added when the transition starts, and removed when it finishes
See Collapse Usage in the Docs.
Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<div class="row">
<div class="col-xs-3 col-sm-2 col-md-2">
<img class="media-object" src="http://placehold.it/350x150" width="75px" height="65px" alt="alt">
</div>
<div class="col-xs-9 col-sm-10 col-md-10">
NAME
</div>
</div>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
DESC
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

How do I resize a image according to view Port Size with Jquery/javascript

I have 3 divs
One is a jumbotron.Second is another div which has accordions. Third is a fixed footer.I want this to get the height according to screen height.Footer heightis 75px.2 accordions height is 100px.The image is a PNG.
<--CODE-->
<body>
//This is the First Div which has the IMAGE
<div class="container push-spaces">
<div class="row">
<div class="col-xs-12">
<img>
</div>
</div>
</div>
</div>
<--2ND DIV PANELS Accordions-->
<div class="panel-group" id="accordion">
<div class="panel panel-default" id="panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseOne"
href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
<div class="panel panel-default" id="panel2">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-target="#collapseTwo"
href="#collapseTwo" class="collapsed">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
</div>
<--FOOTER-->
<div class="navbar navbar-default navbar-fixed-bottom visible-xs ">
<div class="container text-center">
<p class="navbar-btn btn btn-success text-center">BLALALLALAL</p>
</div>
</div>
</body>
You could use CSS3 calc, depending on your browser support.
height: calc(100vh - 175px);

multi bundle accordion effect with anchor button

i am working on one website where i need navbar or instead i can use anchor button for displaying my content,here i have problem with displaying content on load.first time as i click on any button all expanded item get collapsed and than on second click it will follow instruction as i given in code java script.
here is what i did:
$('#button-1').click(function(e) {
$('#collapseOne').collapse('show');
$('#collapseTwo').collapse('show')
$('#collapseThree').collapse('show');
$('#collapsefour').collapse('show')
});
$('#button-2').click(function(e) {
$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('show')
$('#collapseThree').collapse('show');
$('#collapsefour').collapse('show')
});
$('#button-3').click(function(e) {
$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('hide')
$('#collapseThree').collapse('show');
$('#collapsefour').collapse('show')
});
$('#button-4').click(function(e) {
$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('hide')
$('#collapseThree').collapse('hide');
$('#collapsefour').collapse('show')
});
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
button 1
button 2
button 3
button 4
<div class="panel-group" id="accordion">
</div>
<div>
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"></a></h4></div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
test test test
</div>
</div>
<div>
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapsetwo"></a></h4></div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
test-1 test-1 test-1
</div>
</div>
<div>
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"></a></h4></div>
<div id="collapseThree" class="panel-collapse collapse in">
<div class="panel-body">
test-2 test-2 test-2 test-2
</div>
</div>
<div>
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapsefour"></a></h4></div>
<div id="collapsefour" class="panel-collapse collapse in">
<div class="panel-body">
test-3 test-3 test-3
</div>
</div>
example :FIDDLE
You can do following way easily using show() and hide()
$('#button-1').click(function(e) {
$('#collapseOne').show("normal");
$('#collapseTwo').show("normal");
$('#collapseThree').show("normal");
$('#collapsefour').show("normal");
});
$('#button-2').click(function(e) {
$('#collapseOne').hide("normal");
$('#collapseTwo').show("normal");
$('#collapseThree').show("normal");
$('#collapsefour').show("normal");
});
$('#button-3').click(function(e) {
$('#collapseOne').hide("normal");
$('#collapseTwo').hide("normal");
$('#collapseThree').show("normal");
$('#collapsefour').show("normal");
});
$('#button-4').click(function(e) {
$('#collapseOne').hide("normal");
$('#collapseTwo').hide("normal");
$('#collapseThree').hide("normal");
$('#collapsefour').show("normal");
});
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
button 1
button 2
button 3
button 4
<div class="panel-group" id="accordion">
</div>
<div>
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"></a></h4></div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
test test test
</div>
</div>
<div>
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapsetwo"></a></h4></div>
<div id="collapseTwo" class="panel-collapse collapse in">
<div class="panel-body">
test-1 test-1 test-1
</div>
</div>
<div>
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"></a></h4></div>
<div id="collapseThree" class="panel-collapse collapse in">
<div class="panel-body">
test-2 test-2 test-2 test-2
</div>
</div>
<div>
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapsefour"></a></h4></div>
<div id="collapsefour" class="panel-collapse collapse in">
<div class="panel-body">
test-3 test-3 test-3
</div>
</div>
Updated Fiddle

Categories