|
|
Line 112: |
Line 112: |
| </div> | | </div> |
| </div> | | </div> |
− | </html>
| |
− |
| |
− |
| |
− | <html>
| |
− | <div class="container">
| |
− |
| |
− | <div class="row">
| |
− | <button class="collapsible0"><h4 align="center">XXXXXX</h4></button>
| |
− | <div class="contentA">
| |
− | <h3 align="center">XXXXXX</h3>
| |
− | <p align="justify">XXXXXX</p>
| |
− | </div>
| |
− | <button class="collapsible1"><h4 align="center">XXXXXX</h4></button>
| |
− | <div class="contentA">
| |
− | <h3 align="center">XXXXXX</h3>
| |
− | <p align="justify">XXXXXX</p>
| |
− | </div>
| |
− | <button class="collapsible2"><h4 align="center">XXXXXX</h4></button>
| |
− | <div class="contentA">
| |
− | <h3 align="center">XXXXXX</h3>
| |
− | <p align="justify">XXXXXX</p>
| |
− | </div>
| |
− | <button class="collapsible3"><h4 align="center">XXXXXX</h4></button>
| |
− | <div class="contentA">
| |
− | <h3 align="center">XXXXXX</h3>
| |
− | <p align="justify">XXXXXX</p>
| |
− | </div>
| |
− | </div>
| |
− | <br>
| |
− |
| |
− | <style>
| |
− | .contentA {
| |
− | padding: 0 18px;
| |
− | display: none;
| |
− | overflow: hidden;
| |
− | background-color: #ffffff;
| |
− | border-radius: 25px;
| |
− | width: 100%;
| |
− | }
| |
− |
| |
− | .collapsible0 {
| |
− | background-color: rgb(252,101,8);
| |
− | color: white;
| |
− | cursor: pointer;
| |
− | padding: 18px;
| |
− | width: 25%;
| |
− | border: 5px solid #fff;
| |
− | text-align: left;
| |
− | outline: none;
| |
− | font-size: 15px;
| |
− | border-radius: 25px;
| |
− | }
| |
− |
| |
− | .collapsible1 {
| |
− | background-color: rgb(253,148,9);
| |
− | color: white;
| |
− | cursor: pointer;
| |
− | padding: 18px;
| |
− | width: 25%;
| |
− | border: 5px solid #fff;
| |
− | text-align: left;
| |
− | outline: none;
| |
− | font-size: 15px;
| |
− | border-radius: 25px;
| |
− | }
| |
− |
| |
− | .collapsible2 {
| |
− | background-color: rgb(253,174,9);
| |
− | color: white;
| |
− | cursor: pointer;
| |
− | padding: 18px;
| |
− | width: 25%;
| |
− | border: 5px solid #fff;
| |
− | text-align: left;
| |
− | outline: none;
| |
− | font-size: 15px;
| |
− | border-radius: 25px;
| |
− | }
| |
− |
| |
− | .collapsible3 {
| |
− | background-color: #777;
| |
− | color: white;
| |
− | cursor: pointer;
| |
− | padding: 18px;
| |
− | width: 25%;
| |
− | border: 5px solid #fff;
| |
− | text-align: left;
| |
− | outline: none;
| |
− | font-size: 15px;
| |
− | border-radius: 25px;
| |
− | }
| |
− |
| |
− | .active, .collapsible3:hover {
| |
− | background-color: #555;
| |
− | }
| |
− | </style>
| |
− | <script>
| |
− | var coll = document.getElementsByClassName("collapsible0");
| |
− | 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";
| |
− | }
| |
− | });
| |
− | }
| |
− |
| |
− | var coll = document.getElementsByClassName("collapsible1");
| |
− | 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";
| |
− | }
| |
− | });
| |
− | }
| |
− |
| |
− | var coll = document.getElementsByClassName("collapsible2");
| |
− | 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";
| |
− | }
| |
− | });
| |
− | }
| |
− |
| |
− | var coll = document.getElementsByClassName("collapsible3");
| |
− | 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";
| |
− | }
| |
− | });
| |
− | }
| |
− | </script>
| |
− | </div>
| |
− | </html>
| |
| {{:Team:Tec-Chihuahua/Templates/footer}} | | {{:Team:Tec-Chihuahua/Templates/footer}} |