JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div id="menu_pop">

<ul id="accordion">
 <li><div>CSS3<br>
 <span class="button_podtext">Основные возможности</span></div>
 <ul>
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 </ul>
 </li>
 <li><div>HTML5<br>
 <span class="button_podtext">Продолжение или новая платформа?</span></div>
 <ul>
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 <li><a href="#">Ссылка 3</a></li>
 <li><a href="#">Ссылка 4</a></li>
 </ul>
 </li>
 <li><div>WordPress<br>
 <span class="button_podtext">Новости в мире CMS</span></div>
 <ul>
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 <li><a href="#">Ссылка 3</a></li>
 </ul>
 </li><li><div>Основное<br>
 <span class="button_podtext">Блог, Тесты, Форум</span></div>
 <ul>
 <li><a href="#">Ссылка 1</a></li>
 <li><a href="#">Ссылка 2</a></li>
 <li><a href="#">Ссылка 3</a></li>
 </ul>
 </li>
</ul>

</div>

CSS

body {
        background: #000000;
    }

#menu_pop {
 padding: 20px 20px 20px 20px;
 margin: 40px 20px 0 20px;
 width: 280px;
 border-radius: 6px;
 box-shadow:  0px 1px 5px #000;
}

#accordion {
 list-style: none;
 padding: 0px;
 margin: 0px;
}

#accordion .button_podtext {
 font-size: 9px;
 color: #b1b1b1;
}

#accordion div {
 display: block;
 cursor: pointer;
 text-decoration: none;
 display: block;
 padding: 8px 0px 8px 11px;
 background: #000;
 color: #fff;
 font-size: 12px;
 font-family: tahoma;
 background: url('http://truequery.ru/images/bg.png') 0px 0px;
 text-shadow: 0px 1px 0px rgba( 0, 0, 0, 0.6);
 list-style: circle;
}

#accordion div:hover {
 background: url('http://truequery.ru/images/bg.png') 0px -44px;
}

#accordion ul a {
 color: #777;
}

#accordion ul {
 list-style: none;
 padding: 5px;
 font-size: 10px;
 font-family: Tahoma;
 background: #1a1a1a;
 box-shadow: inset 0px 3px 6px rgba( 0, 0, 0, 0.7);
 display: none;
}

#accordion ul li {
 font-weight: normal;
 cursor: auto;
 padding: 3px 7px;
}

#accordion a {
 text-decoration: none;
}

#accordion a:hover {
 text-decoration: underline;
}

JavaScript

$("#accordion > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(280);
}
$(this).next().slideToggle(280);
});