asked on
collapse in & collapse
I have a collapsible div that I want open when someone is viewing on a desktop but when on smaller mobile device I want the div to be collapsed. I'm using the code below.
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#demo">
<h3 class="panel-title">Panel 1</h3>
</div>
<div id="demo" class="panel-body collapse in">
box 1
</div>
</div>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#demo1">
<h3 class="panel-title">Panel 1</h3>
</div>
<div id="demo1" class="panel-body collapse in">
box 1
</div>
</div>
</div>
CSSWeb FrameworksResponsive WebBootstrap
Last Comment
Pravin Asar
Are you using jquery ?
ASKER
No, trying to just the collapse in & collapse in bootstrap.
<!DOCTYPE html>
<html >
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#demo" onclick='$("#demo").toggle
<h3 class="panel-title">Panel 1</h3>
</div>
<div id="demo" class="panel-body collapse in">
box 1
</div>
</div>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#demo1" onclick='$("#demo1").toggl
<h3 class="panel-title">Panel 2</h3>
</div>
<div id="demo1" class="panel-body collapse in">
box 2
</div>
</div>
</div>
</body>
</html>
<html >
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#demo" onclick='$("#demo").toggle
<h3 class="panel-title">Panel 1</h3>
</div>
<div id="demo" class="panel-body collapse in">
box 1
</div>
</div>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#demo1" onclick='$("#demo1").toggl
<h3 class="panel-title">Panel 2</h3>
</div>
<div id="demo1" class="panel-body collapse in">
box 2
</div>
</div>
</div>
</body>
</html>
okay. Set the class
class="panel-collapse collapse"
class="panel-collapse collapse"
Here is complete example. Should work well with mobile devices.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-widt
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="panel-group col-xs-12" id="accordion">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#demo2">
<h3 class="panel-title">Panel 1</h3>
</div>
<div id="demo2" class="panel-body collapse in">
box 1
</div>
</div>
</div>
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#demo1">
<h3 class="panel-title">Panel 2</h3>
</div>
<div id="demo1" class="panel-body collapse in">
box 2
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(".collapse").collapse();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-widt
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="panel-group col-xs-12" id="accordion">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#demo2">
<h3 class="panel-title">Panel 1</h3>
</div>
<div id="demo2" class="panel-body collapse in">
box 1
</div>
</div>
</div>
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#demo1">
<h3 class="panel-title">Panel 2</h3>
</div>
<div id="demo1" class="panel-body collapse in">
box 2
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(".collapse").collapse();
</script>
</body>
</html>
ASKER
Thanks for the help but let me see if I can explain a little better. In the code you just sent me works perfect but I want the div to be expanded and when its on a desktop so I used collapse in but then when I go to a smaller screen size I just want the div to be collapse like it would be if you just use collapse.
Thanks for the help.
Thanks for the help.
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.