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:

Code Select Expand

<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:

Code Select Expand

<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:

Code Select Expand

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

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:

Code Select Expand

<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:

Code Select Expand

<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:

Code Select Expand

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

SSI News Side PHP Block

Custom Login Block

Sticky Side Block

Social Side Block

Simple Recent Topics Block