Changes

Jump to navigation Jump to search
2,193 bytes removed ,  14:56, 28 October 2022
Replaced content with "{| role="presentation" class="wikitable mw-collapsible" | <strong>Lorem ipsum</strong> |- | Lorem ipsum dolor sit amet |}"
Line 1: Line 1: −
<!DOCTYPE html>
+
{| role="presentation" class="wikitable mw-collapsible"
<html>
+
| <strong>Lorem ipsum</strong>
<head>
+
|-
<meta name="viewport" content="width=device-width, initial-scale=1">
+
| Lorem ipsum dolor sit amet
<style>
+
|}
.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;
  −
  max-height: 0;
  −
  overflow: hidden;
  −
  transition: max-height 0.2s ease-out;
  −
  background-color: #f1f1f1;
  −
}
  −
</style>
  −
</head>
  −
<body>
  −
 
  −
<h2>Animated Collapsibles</h2>
  −
 
  −
<p>A Collapsible:</p>
  −
<button class="collapsible">Open Collapsible</button>
  −
<div class="content">
  −
  <p>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.</p>
  −
</div>
  −
 
  −
<p>Collapsible Set:</p>
  −
<button class="collapsible">Open Section 1</button>
  −
<div class="content">
  −
  <p>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.</p>
  −
</div>
  −
<button class="collapsible">Open Section 2</button>
  −
<div class="content">
  −
  <p>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.</p>
  −
</div>
  −
<button class="collapsible">Open Section 3</button>
  −
<div class="content">
  −
  <p>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.</p>
  −
</div>
  −
 
  −
<script>
  −
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.maxHeight){
  −
      content.style.maxHeight = null;
  −
    } else {
  −
      content.style.maxHeight = content.scrollHeight + "px";
  −
    }
  −
  });
  −
}
  −
</script>
  −
 
  −
</body>
  −
</html>
 

Navigation menu

GCwiki