We Keep Coding

bootstrap accordion show by default on desktop and hide by default mobile

I'm kind of new to bootstrap so I'm not sure how I'd go about this.
I have a simple bootstrap accordion like in this snippet. It is split into multiple accordions because I want them to be able to expand and collapse independently from each other. (as in can expand and show all items or none, not just one expanded and the others collapsed)
I want to disable the expanding and collapsing on desktop and make sure each item is shown. But then on mobile I only want to have the first item shown and the others collapsed by default.
Any suggestions on how I could achieve this would be greatly appreciated.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading1">
<button class="btn btn-default" data-toggle="collapse" data-target="#body1" aria-expanded="true" aria-controls="body1">
//heading
</button>
</div>
<div id="body1" class="collapse show" aria-labelledby="heading1" data-parent="#accordion">
<div class="product card-body">
//content
</div>
</div>
</div>
</div>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading2">
<button class="btn btn-default" data-toggle="collapse" data-target="#body2" aria-expanded="true" aria-controls="body2">
//heading
</button>
</div>
<div id="body2" class="collapse show" aria-labelledby="heading2" data-parent="#accordion">
<div class="product card-body">
//content
</div>
</div>
</div>
</div>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading3">
<button class="btn btn-default" data-toggle="collapse" data-target="#body3" aria-expanded="true" aria-controls="body3">
//heading
</button>
</div>
<div id="body3" class="collapse show" aria-labelledby="heading3" data-parent="#accordion">
<div class="product card-body">
//content
</div>
</div>
</div>
</div>

I have found a solution for this, please check below
CSS for desktop
.modified-accordion .card-header{ position: relative;}
.modified-accordion .card-header:after{ content: ''; position: absolute; width: 100%;
height: 100%; left: 0; top: 0;}
.modified-accordion .collapse:not(.show){ display: block;}
CSS for Mobile
#media (max-width: 767px) {
.modified-accordion .collapse:not(.show){ display: none;}
.modified-accordion .card-header:after{ display: none;}
}
HTML structure
<div class="accordion modified-accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Collapsible Group Item #1</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
<div class="card-body">Contect-1</div>
</div>
</div>
</div>
<div class="accordion modified-accordion">
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Collapsible Group Item #2</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
<div class="card-body">Content-2</div>
</div>
</div>
</div>
<div class="accordion modified-accordion">
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree">
<div class="card-body">Content-3</div>
</div>
</div>
</div>

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');
});
});

On open and click JS style - panel1 not taking on style

Ok so I finally have managed to get most of this working.
I have a script that changes the color of my panel-title on click / open.
However, i am having a problem with accordions with more than 4 panels.
To recreate the problem: open another panel, you will see that panel1 is still using the grey panel-title background. Click on another panel, and you will notice panel1 NOW uses the correct style.
Why can i not get panel1 to turn back to white the FIRST time it's closed?
Thanks in advance.
var selectIds = $('#panel1,#panel2,#panel3,#panel4,#panel5,#panel6,#panel7,#panel8');
$(function ($) {
selectIds.on('show.bs.collapse hidden.bs.collapse', function () {
$(this).prev().find('.fa').toggleClass('fa-plus fa-minus');
});
$(".panel-heading").find("a[data-toggle=collapse]").on('click', function () {
if ($(this).hasClass('collapsed')) {
$(this).closest('.panel-group').find('.panel-default').removeClass('open');
$(this).closest('.panel-default').addClass('open');
} else {
$(this).closest('.panel-default').removeClass('open');
}
});
});
.panel-default.open {
background-color: #616161;
transition: all 1s;
}
.custom-panel .panel-default.open >.panel-heading {
background: transparent;
color:#fff;
}
.custom-panel .panel-default>.panel-heading {
background: #fff;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="panel-group custom-panel" id="accordion">
<div class="panel panel-default open">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle collapsed text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel1">
<i class="fa fa-minus text-primary"></i> CONTENT
</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse in">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="fa fa-plus text-primary"></i> CONTENT</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="fa fa-plus text-primary"></i> CONTENT</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="fa fa-plus text-primary"></i> CONTENT</a>
</h4>
</div>
<div id="panel4" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel5"><i class="fa fa-plus text-primary"></i> CONTENT</a>
</h4>
</div>
<div id="panel5" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel6"><i class="fa fa-plus text-primary"></i> CONTENT</a>
</h4>
</div>
<div id="panel6" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel7"><i class="fa fa-plus text-primary"></i> CONTENT</a>
</h4>
</div>
<div id="panel7" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="thin accordion-toggle text-normalize" data-toggle="collapse" data-parent="#accordion" href="#panel8"><i class="fa fa-plus text-primary"></i> CONTENT</a>
</h4>
</div>
<div id="panel8" class="panel-collapse collapse">
<div class="panel-body panel-body-help">
CONTENT
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

You just need to add class open to the first header with panel-default in your html.
It will display the correct class on pageload.
var selectIds = $('#panel1,#panel2,#panel3,#panel4,#panel5,#panel6,#panel7,#panel8');
$(function ($) {
selectIds.on('show.bs.collapse hidden.bs.collapse', function () {
$(this).prev().find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
});
$(".panel-heading").find("a[data-toggle=collapse]").on('click', function () {
if ($(this).hasClass('collapsed')) {
$(this).closest('.panel-group').find('.panel-default').removeClass('open');
$(this).closest('.panel-default').addClass('open');
} else {
$(this).closest('.panel-default').removeClass('open');
}
});
});
.panel-default.open {
background-color: red;
transition: all 1s;
}
.custom-panel .panel-default.open >.panel-heading {
background: transparent;
}
.custom-panel .panel-default>.panel-heading {
background: #fff;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="panel-group custom-panel" id="accordion">
<div class="panel panel-default open">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-minus"></i>Panel 1</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse in">
<div class="panel-body">Contents panel 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus"></i>Panel 2</a>
</h4>
</div>
<div id="panel2" class="panel-collapse collapse">
<div class="panel-body">Contents panel 2</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus"></i>Panel 3</a>
</h4>
</div>
<div id="panel3" class="panel-collapse collapse">
<div class="panel-body">Contents panel 3</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel4"><i class="glyphicon glyphicon-plus"></i>Panel 4</a>
</h4>
</div>
<div id="panel4" class="panel-collapse collapse">
<div class="panel-body">Contents panel 4</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

How to set a button visible only when a panel is collapsed

there is a way to set a button visible only when a panel is collapsed? I tried the bellow code but without success. I also tried to use getElementById("#closeButton").style.visibility but it still not working.
function checkCollapsed(){
if($("#panel").hasClass('ui-collapsible-collapsed')){
$("#closeButton").hide();
}else{
$("#closeButton").show();
}
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel-group col-lg-1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#panel" onclick="checkCollapsed()">test</a>
<button id="closeButton" type="button" class="close" aria-label="Close" >
<span aria-hidden="true">×</span>
</button>
</h4>
</div>
<div id="panel" class="panel-collapse collapse">
blablabla
</div>
</div>
</div>

.in class is being added to #panel element. ui-collapsible-collapsed remain there all the time.
function checkCollapsed() {
if ($("#panel").hasClass('in')) {
$("#closeButton").hide();
} else {
$("#closeButton").show();
}
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel-group col-lg-1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#panel" onclick="checkCollapsed()">test</a>
<button id="closeButton" type="button" class="close" aria-label="Close" >
<span aria-hidden="true">×</span>
</button>
</h4>
</div>
<div id="panel" class="panel-collapse collapse">
blablabla
</div>
</div>
</div>

I supose that the problem is when your click, is before change the class.
One idea is to make a little timeout:
function checkCollapsed(){
setTimeout(function(){
if($("#panel").hasClass('ui-collapsible-collapsed')){
$("#closeButton").hide();
}else{
$("#closeButton").show();
}
}, 110);
}
The idea is take a time to collapside panel to change status, and class.
Expect it help

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);