How to show a specific content container at startup

Bootstrap 4 Code

Output

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> 

</head>
<body>
<div class="container">
<h3>Bootstrap 4 collapse</h3>
<p>
  <button class="btn btn-info" type="button" data-toggle="collapse" data-target="#democollapseBtn" aria-expanded="false" aria-controls="democollapseBtn">
    Toggle Content visibility
  </button>
  <button class="btn btn-success" type="button" data-toggle="collapse" data-target="#democollapseimg" aria-expanded="false" aria-controls="democollapseimg">
    Mixed content demo
  </button>    
</p>
<div class="collapse" id="democollapseBtn">
  <div class="card card-body">
    The demo of collapse/expand content by Bootstrap 4 collapse classes.
  </div>
</div>

<div class="collapse show" id="democollapseimg">
  <div class="card card-body">
    May contain different content like text, images, videos etc. <br />
    <img src="https://www.jquery-az.com/wp-content/uploads/2017/10/logo.jpg" width="200" height="150">
     
  </div>
</div>

</div>
</body>
</html>

Bootstrap 4 collapse

The demo of collapse/expand content by Bootstrap 4 collapse classes.

May contain different content like text, images, videos etc.