Accordion block for your sidebar

Mick in Tutorials on February 03, 2019

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.


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

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

    echo '

Add after:

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

* {
  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

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


Tagged with: accordion smf sidebar block html css 


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



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.


Advertisement  


Hot on idesignSMF

Excellent Support. By using our themes, you also use our excellent support! Our expert staff is here for you.

go up