Wordpress archive accordion menu

In this example below you will see how to do a Wordpress archive accordion menu with some HTML / CSS and Javascript

Simple solution for an accordion menu using vanilla javascript and some CSS3 properties.

Thumbnail
This awesome code was written by 1, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Wordpress archive accordion menu</title>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <aside id="archives" class="widget widget_archive">
  <h3 class="widget-title">Archivos</h3>
  <ul>
    <li><a href="#">2015</a>
      <i class="fa fa-angle-down"></i>
      <ul>
        <li><a href="#">febrero 2015</a></li>
        <li><a href="#">enero 2015</a></li>
      </ul>
    </li>
    <li><a href="#">2014</a>
      <i class="fa fa-angle-down"></i>
      <ul class="hide">
        <li><a href="#">diciembre 2014</a></li>
        <li><a href="#">noviembre 2014</a></li>
        <li><a href="#">marzo 2014</a></li>
        <li><a href="#">febrero 2014</a></li>
        <li><a href="#">enero 2014</a></li>
      </ul>
    </li>
    <li><a href="#">2013</a>
      <i class="fa fa-angle-down"></i>
      <ul class="hide">
        <li><a href="#">diciembre 2013</a></li>
        <li><a href="#">septiembre 2013</a></li>
      </ul>
    </li>
  </ul>
</aside>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1/wordpress-archive-accordion-menu-xqgNrE */
@import url(https://fonts.googleapis.com/css?family=Lato);

body {
  font-family: 'Lato', sans-serif;
}

.fa-angle-down {
  transition: all .3s ease-in-out;
}

.widget {
  width:60%;
  margin:50px auto 0 auto;
  border:4px solid rgba(10,10,10,0.05);
  padding:10px;
  border-radius:10px;
  -webkit-box-shadow: 10px 10px 45px -20px rgba(0,0,0,0.75);
  -moz-box-shadow: 10px 10px 45px -20px rgba(0,0,0,0.75);
  box-shadow: 10px 10px 45px -20px rgba(0,0,0,0.75);
}

.widget-title {
  font-weight:bold;
  text-transform:uppercase;
  color:#636363;
  padding-bottom:10px
}

.widget a {
  color:#9b9b9b;
  text-decoration:none;
  padding:10px 0 10px 10px;
  display:inline-block;
}

.widget i {
  color: #9b9b9b;
  padding:10px 16px;
  float:right;
  line-height:1.5;
}

.widget i:hover {
  cursor: pointer;
  color:#444;   
}

.widget a:hover {
  color:#444
}

.widget ul {
  list-style-type:none;
  margin:0;
  padding:0;
  background-color:#eee;
}

.widget ul li:first-child .fa-angle-down {
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg); 
  transform: rotate(180deg);
}

.widget ul {
  line-height:1.5;
}

.widget li {
  border-top:1px solid #ccc;
}

.widget li li {
  line-height:1.5;
  border-top:1px solid #eaeaea;
  background-color:#fff;
}

.widget > ul li:first-child 
li a:first-child {
  display:inline-block;
}

.hide {
  display:none;
}

/*Downloaded from https://www.codeseek.co/1/wordpress-archive-accordion-menu-xqgNrE */
/* 

Reviewed on http://codereview.stackexchange.com/questions/83940/minimalist-accordion-implementation-using-vanilla-javascript 

http://sonnyt.com/javascript-check-if-element-has-class/

*/

var el = document.getElementById("archives");
var hook = el.getElementsByClassName("fa");
var rotated;

for (var i = 0; i < hook.length; i++) {
	hook[i].addEventListener("click",Toogle);
}

function Toogle() {
    'use strict';
  if (this.nextElementSibling.nodeType === 1 && hasClass(this.nextElementSibling,"hide")) { 
    if (this.nextElementSibling.classList) {
      this.nextElementSibling.classList.remove('hide');
    } else {
      this.nextElementSibling.className = this.nextElementSibling.className.replace(new RegExp('(^|\\b)' + "hide" + '(\\b|$)', 'gi'), ' ');
    }
    rotated = false;
  }
  else {    
    this.nextElementSibling.className += " " + "hide";
    rotated = true;
  }
  
  var deg = rotated ? 0 : 180;
    
  this.style.transform = 'rotate('+deg+'deg)';     
}

function hasClass (el, className){
  return el.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(el.className);
}

Comments