Collapsible Content Block

Written by Mick in Tutorials on 19 Aug 2018



Create an accordion (collapsible content) using an HTML block in your favorite portal. Accordions are useful when you want to toggle between hiding and showing large amount of content. This block will fit seamlessly as it is responsive. It can also be adapted to a PHP block and add some SMF functionality....but for now, this tutorial is in HTML form.




Replace colors to fit your style

The CSS:
<style type="text/css">
.accordion {
    background-color: #d63031;
    color: #ffffff;
    cursor: pointer;
    outline: none;
    padding: 18px;
    width: 100%;
    text-align: left;
    font-size: 15px;
    border: none;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #ff7675;
}

.panel {
    padding: 0 18px;
    background-color: #dfe6e9;
    color: #333333;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
.accordion:after {
    content: "\002B";
    color: #ffffff;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}
</style>


The HTML:
<button class="accordion">Some Title 1</button>
<div class="panel">
  <p>With a commitment to quality content for the SMF community, we craft premium SMF themes for the popular free software Simple Machines Forum and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.</p>
</div>

<button class="accordion">Some Title 2</button>
<div class="panel">
  <p>With a commitment to quality content for the SMF community, we craft premium SMF themes for the popular free software Simple Machines Forum and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.</p>
</div>

<button class="accordion">Some Title 3</button>
<div class="panel">
  <p>With a commitment to quality content for the SMF community, we craft premium SMF themes for the popular free software Simple Machines Forum and dedicated to provide useful tutorials, web development, resources, insightful articles and creative inspiration.</p>
</div>


The Script:
<script type="text/javascript">
                  var acc = document.getElementsByClassName("accordion");
                  var i;

                 for (i = 0; i < acc.length; i++) {
                   acc[i].addEventListener("click", function() {
                     this.classList.toggle("active");
                    var panel = this.nextElementSibling;
                     if (panel.style.maxHeight){
                       panel.style.maxHeight = null;
                     } else {
                      panel.style.maxHeight = panel.scrollHeight + "px";
                     }
                   });
                 }
</script>


You can add all three codes in one block





Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.
    
0 Comments


Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.