<!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);
}