Material Design | Collapse

How you understand and know about Collapse?

Click me to see Collapse. Yeah looks nice.

Collapsibles

A Collapsible:

Write somthing here...

Collapsible Set:

Write somthing here....

Write somthing here to show your contents...

Your showcase never stop.

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
 <link rel="canonical"href="https://www.cdn.getweb.dev/docs/v1/css/getweb.css">
</head>
<body>

<h2>Collapsibles</h2>

<p>A Collapsible:</p>
<button type="button" class="collapsible gw-red">Open Collapsible</button>
<div class="content">
  <p>Write somthing here...</p>
</div>

<p>Collapsible Set:</p>
<button type="button" class="collapsible gw-green">Open me 1</button>
<div class="content">
  <p>Write somthing here....</p>
</div>
<button type="button" class="collapsible gw-black">Open me  2</button>
<div class="content">
  <p>Write somthing here....</p>
</div>
<button type="button" class="collapsible gw-blue">Open me 3</button>
<div class="content">
  <p>Write somthing here....</p>
</div>

<button type="button" class="collapsible">Open me 4</button>
<div class="content">
  <p>Write somthing here....</p>
</div>


</body>
</html>


.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #FFF8DC;
}


var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

Quick

Collapse

How you understand and know about Collapse?

Collapsibles

Input Code

getWeb.dev

Docs

Developer Team

Devices

Download