AUTO ACCORDION MENU-2
.
.
.
.
.
<style>
.text-center {text-align: center;}
*, *:before, *:after {-webkit-border-sizing: border-box; -moz-border-sizing: border-box; border-sizing: border-box;}
.container {width: 240px;background: #333333; margin:0; padding:0;}
.container > ul {list-style:none; padding:0; margin:0;}
.dropdown a {text-decoration: none;}
.dropdown [data-toggle="dropdown"] {position:relative;display:block;background: #333333;color:#FFFFFF;font:13px Arial;border-bottom:1px solid #FBBB22;padding:5px;}
.dropdown [data-toggle="dropdown"]:hover {background: #105105;}
.dropdown .icon-arrow {position: absolute;display: block;font:13px Arial;color:#FFFFFF;top:5px;right:5px;}
.dropdown .icon-arrow:before {content: '\25BC';}
.dropdown .dropdown-menu {max-height:0;width:580px;background: #333333;overflow: hidden;list-style: none;padding:0;margin:0;}
.dropdown .dropdown-menu li {padding: 0;}
.dropdown .dropdown-menu li a {display: block;color: #FFFFFF;background: #333333; font:13px Arial; border-bottom:1px solid #FBBB22;padding:5px;}
.dropdown .dropdown-menu li a:hover {background: #105105;}
.dropdown .show, .dropdown .hide {
-moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%; transform-origin: 50% 0%;}
.dropdown .show {display: block; max-height: 9999px;
-moz-transform: scaleY(1); -ms-transform: scaleY(1);
-webkit-transform: scaleY(1); transform: scaleY(1);
animation: showAnimation 0.2s ease-in-out;
-moz-animation: showAnimation 0.2s ease-in-out;
-webkit-animation: showAnimation 0.2s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;}
.dropdown .hide {max-height: 0;
-moz-transform: scaleY(0); -ms-transform: scaleY(0);
-webkit-transform: scaleY(0); transform: scaleY(0);
animation: hideAnimation 0.2s ease-out;
-moz-animation: hideAnimation 0.2s ease-out;
-webkit-animation: hideAnimation 0.2s ease-out;
-moz-transition: max-height 0.2s ease-out;
-o-transition: max-height 0.2s ease-out;
-webkit-transition: max-height 0.2s ease-out;
transition: max-height 0.2s ease-out;}
</style>
<script src="https://github-codes.github.io/mycodes/javascripts/archive-page-1p.js"></script>
<div class="container">
<ul>
<li class="dropdown">
<a href="#" data-toggle="dropdown">TEXT BOXES<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/TEXT BOXES?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">BACKGROUNDS<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/BACKGROUNDS?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">IMAGE EFFECTS<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/IMAGE EFFECTS?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">ΕΝΣΩΜΑΤΩΣΕΙΣ<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΕΝΣΩΜΑΤΩΣΗ ΑΡΧΕΙΩΝ?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">ΑΣΦΑΛΕΙΑ BLOG<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΑΣΦΑΛΕΙΑ BLOG?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">ΣΥΜΒΟΥΛΕΣ SEO<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/SEO?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">ΣΧΟΛΙΑ BLOGGER<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΣΧΟΛΙΑ BLOGGER?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">ON LINE ΕΡΓΑΛΕΙΑ<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ON LINE TOOLS?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">FACEBOOK WIDGETS<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/FACEBOOK WIDGETS?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">ΜΟΡΦΟΠΟΪΗΣΗ BLOG<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΜΟΡΦΟΠΟΙΗΣΗ BLOG?max-results=50&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">ΑΛΛΑ WIGETS ΓΙΑ BLOGS<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/WIDGETS ΓΙΑ BLOGS?max-results=50&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">ΤΑΞΙΝΟΜΗΣΗ ΑΝΑΡΤΗΣΕΩΝ<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΤΑΞΙΝΟΜΗΣΗ ΑΝΑΡΤΗΣΕΩΝ?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">ΧΡΙΣΤΟΥΓΕΝΝΙΑΤΙΚΑ GADGETS<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/CHRISTMAS WIDGETS?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">BUTTONS & POPUP WINDOWS<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/SOSIAL BUTTONS?max-results=50&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΟΡΙΖΟΝΤΙΑ ΚΑΙ ΚΑΘΕΤΑ ΜΕΝΟΥ?max-results=50&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">ΚΥΛΙΟΜΕΝΑ LINKS TEXT IMAGES<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/ΚΥΛΙΟΜΕΝΑ LINKS TEXT IMAGES?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">GALLERIES SLIDERS SLIDESHOWS<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<script src="https://the-best-widgets.blogspot.gr/feeds/posts/summary/-/SLIDESHOWS?max-results=50&alt=json-in-script&callback=recentpostslist"></script>
</ul></li></ul></div>
<script>
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
if(!menu.hasClass('show')) {
menu.classList.add('show');
menu.classList.remove('hide');
arrow.classList.add('open');
arrow.classList.remove('close');
event.preventDefault();}
else {
menu.classList.remove('show');
menu.classList.add('hide');
arrow.classList.remove('open');
arrow.classList.add('close');
event.preventDefault();}};})
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);};
</script>
