Here's a decent accordion script useful on sidebars if your site needs plenty of links for better user navigational experience. Extremely easy to put together and use on your favorite portal mod but first we need to create and HTML side block and add a few lines of code to 2 templates.

demo

1. Open your theme's index.template php and find:

Code Select Expand

    // Output any remaining HTML headers. (from mods, maybe?)
    echo $context['html_headers'];

    echo '

Add after:

Code Select Expand

          <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />

If you already use @fontawesome icons, skip step 1

2. The CSS, Open your theme's index.css file and at the very end add:

Code Select Expand

* {
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
ul {
list-style-type: none;
}
.accordion {
width: 100%;
max-width: 360px;
margin: 30px auto 20px;
background: #f9f9f9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
color: #336ca6;
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #dcdcdc;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.accordion li:last-child .link {
border-bottom: 0;
}
.accordion li i {
position: absolute;
top: 16px;
left: 12px;
font-size: 18px;
color: #c1c1c1;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.accordion li i.fa-chevron-down {
right: 12px;
left: auto;
font-size: 16px;
}
.accordion li.open .link {
color: #0984e3;
}
.accordion li.open i {
color: #0984e3;
}
.accordion li.open i.fa-chevron-down {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion li.default .submenu {display: block;}
/**
* Submenu
-----------------------------*/
.submenu {
display: none;
background: #336ca6;
font-size: 14px;
}
.submenu li {
border-bottom: 1px solid #dcdcdc;
}
.submenu a {
display: block;
text-decoration: none;
color: #d9d9d9;
padding: 12px;
padding-left: 42px;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.submenu a:hover {
background: #0984e3;
color: #FFF;
}

3. Add the following to an HTML block

Code Select Expand

<!-- container-->
<ul id="accordion" class="accordion">
<li>
<div class="link"><i class="fas fa-paint-brush"></i> Web Design <i class="fas fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Photoshop</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Web</a></li>
</ul>
</li>
<li class="default open">
<div class="link"><i class="fas fa-code"></i> Front-end <i class="fas fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Frameworks javascript</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fas fa-mobile"></i> Responsive design <i class="fas fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Tablets</a></li>
<li><a href="#">Mobiles</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li><div class="link"><i class="fas fa-globe"></i> Around the web <i class="fas fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Google</a></li>
<li><a href="#">Bing</a></li>
<li><a href="#">Yahoo</a></li>
<li><a href="#">Other browsers</a></li>
</ul>
</li>
</ul>


<script type="text/javascript">
$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;

// Variables
var links = this.el.find(".link");
// Event
links.on("click", {el: this.el, multiple: this.multiple}, this.dropdown)
}

Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();

$next.slideToggle();
$this.parent().toggleClass("open");

if (!e.data.multiple) {
$el.find(".submenu").not($next).slideUp().parent().removeClass("open");
};
}

var accordion = new Accordion($("#accordion"), false);
});
</script>

References & Credits:
creaticode.com

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

[1.]

Here's a decent accordion script useful on sidebars if your site needs plenty of links for better user navigational experience. Extremely easy to put together and use on your favorite portal mod but first we need to create and HTML side block and add a few lines of code to 2 templates.

demo

1. Open your theme's index.template php and find:

Code Select Expand

    // Output any remaining HTML headers. (from mods, maybe?)
    echo $context['html_headers'];

    echo '

Add after:

Code Select Expand

          <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />

If you already use @fontawesome icons, skip step 1

2. The CSS, Open your theme's index.css file and at the very end add:

Code Select Expand

* {
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
ul {
list-style-type: none;
}
.accordion {
width: 100%;
max-width: 360px;
margin: 30px auto 20px;
background: #f9f9f9;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.accordion .link {
cursor: pointer;
display: block;
padding: 15px 15px 15px 42px;
color: #336ca6;
font-size: 14px;
font-weight: 700;
border-bottom: 1px solid #dcdcdc;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.accordion li:last-child .link {
border-bottom: 0;
}
.accordion li i {
position: absolute;
top: 16px;
left: 12px;
font-size: 18px;
color: #c1c1c1;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.accordion li i.fa-chevron-down {
right: 12px;
left: auto;
font-size: 16px;
}
.accordion li.open .link {
color: #0984e3;
}
.accordion li.open i {
color: #0984e3;
}
.accordion li.open i.fa-chevron-down {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion li.default .submenu {display: block;}
/**
* Submenu
-----------------------------*/
.submenu {
display: none;
background: #336ca6;
font-size: 14px;
}
.submenu li {
border-bottom: 1px solid #dcdcdc;
}
.submenu a {
display: block;
text-decoration: none;
color: #d9d9d9;
padding: 12px;
padding-left: 42px;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.submenu a:hover {
background: #0984e3;
color: #FFF;
}

3. Add the following to an HTML block

Code Select Expand

<!-- container-->
<ul id="accordion" class="accordion">
<li>
<div class="link"><i class="fas fa-paint-brush"></i> Web Design <i class="fas fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Photoshop</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Web</a></li>
</ul>
</li>
<li class="default open">
<div class="link"><i class="fas fa-code"></i> Front-end <i class="fas fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Frameworks javascript</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fas fa-mobile"></i> Responsive design <i class="fas fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Tablets</a></li>
<li><a href="#">Mobiles</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li><div class="link"><i class="fas fa-globe"></i> Around the web <i class="fas fa-chevron-down"></i></div>
<ul class="submenu">
<li><a href="#">Google</a></li>
<li><a href="#">Bing</a></li>
<li><a href="#">Yahoo</a></li>
<li><a href="#">Other browsers</a></li>
</ul>
</li>
</ul>


<script type="text/javascript">
$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;

// Variables
var links = this.el.find(".link");
// Event
links.on("click", {el: this.el, multiple: this.multiple}, this.dropdown)
}

Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();

$next.slideToggle();
$this.parent().toggleClass("open");

if (!e.data.multiple) {
$el.find(".submenu").not($next).slideUp().parent().removeClass("open");
};
}

var accordion = new Accordion($("#accordion"), false);
});
</script>

References & Credits:
creaticode.com

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

Add Google Directions Map to your forum

Custom pages for your SMF forum

Add ajax RSS pausing scroller to your forum

Add "forum" to linktree to SimplePortal

Latest member and forum stats combination