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>

Open in new window

ucohockeyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Pravin AsarPrincipal Systems EngineerCommented:
Are you using jquery ?
ucohockeyAuthor Commented:
No, trying to just the collapse in & collapse in bootstrap.
Pravin AsarPrincipal Systems EngineerCommented:
<!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").toggle()'>
                  <h3 class="panel-title">Panel 2</h3>
            </div>
            <div id="demo1" class="panel-body collapse in">
                  box 2
            </div>
      </div>
</div>
</body>
</html>
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Pravin AsarPrincipal Systems EngineerCommented:
okay. Set the class

class="panel-collapse collapse"
Pravin AsarPrincipal Systems EngineerCommented:
Here is complete example. Should work well with mobile devices.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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>
ucohockeyAuthor Commented:
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.
Pravin AsarPrincipal Systems EngineerCommented:
For smaill device, you can check the screen width.
For example:

$(document).ready(function(){
  if ($(window).width() <= 480){  
    $(".collapse").collapse();
  }
});

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.