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 Pizza.

  Connect with us:

     

  Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.
Commitment issues? Unsubscribe at any time.

Get 100% complete access to our entire collection and find out why 11,202 SMF owners prefer our themes



0 Comments







  Documentation & Tutorials. We have a great selection of tutorials to help you make the most of your theme.