Professional & Impressive. We provide top quality free SMF themes with excellent support.

Collapsible Content Block

Mick in Tutorials on Aug 19, 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


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



Tagged with:


Mick

Mick G

idesignsmf.com

    

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 and has a weakness for Tacos and Pizza.


0 Comments




Latest Discussions

Join the conversation

Our Most Popular Features