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.

demo

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

See the Pen Collapsible Content by Mick ([member=1]Mick[/member]-) on CodePen.

Tagged with: