×

Save to Google Drive

If you have a Google account, you can save this code to your Google Drive.

Google will ask you to confirm Google Drive access.

Warning: The 10th of June 2021, we will discontinue the ability to save to Google Drive.

You will still be able to access your stored code on Google Drive.

×

Open from Google Drive

If you have saved a file to Google Drive, you can open it here:

Warning: The 10th of June 2021, we will discontinue the ability to save to Google Drive.

You will still be able to access your stored code on Google Drive.

Result Size: 1260 x 277
x
 
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Expand and Collapse with different icons</h2>
    <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#demo">
      <span class="glyphicon glyphicon-collapse-down"></span> Open
    </button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>
<script>
$(document).ready(function(){
  $("#demo").on("hide.bs.collapse", function(){
    $(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
  });
  $("#demo").on("show.bs.collapse", function(){
×

Report a Problem:

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

help@w3schools.com