Помогите сделать выпадающий список
Страницы: 1
Помогите сделать выпадающий список, кому не сложно
Всем привет, увидел на сайте biblprog.org.ua/ru/ выпадающий список состоящий из подкатегорий. Как такое чудо реализовать может есть идеи? Помогите пожалуйста, перекопал тучу сайтов и все не то
Код
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Раскрывающиеся списки</title>
   <!--[[if lt IE 9]]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
   <style type="text/css">
   * { margin: 0; padding: 0; }
   body { background: #f0f0f0; font-family: sans-serif; }
   aside { display: block; }
   .box {
   display: table;
   margin: 10px auto;
   background: #fff;
   border: 1px solid #d1d1d1;
   padding: 4px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-box-shadow: 0px 0px 10px #ddd;
   -webkit-box-shadow: 0px 0px 10px #ddd;
   }
   h2 {
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   padding: 5px;
   background: -moz-linear-gradient(center top, #efefef 0%,#e0e0e0 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #efefef),color-stop(1, #e0e0e0));
   border: 1px solid #d1d1d1;
   color: #c1c1c1;
   font-size: 13px;
   font-weight: normal;
   text-shadow: 1px 1px 0px #fff;
   }
   h2 span { float: right; cursor: pointer; }
   h2 span:hover { text-shadow: 0px 0px 3px #a1eeff; }
   ul { padding: 5px; overflow: hidden; }
   ul li { font-size: 13px; list-style-type: square; list-style-position: inside; color: #a1a1a1; padding: 5px; }
   </style>
   
   
</head>

<body>
<aside>
<div class="box">
    <h2>Список №1<span class="expand">+</span></h2>
    <ul>
        <li>Пункт №1</li>
        <li>Пункт №2</li>
        <li>Пункт №3</li>
        <li>Пункт №4</li>
    </ul>
</div>
<div class="box">
    <h2>Список №2<span class="expand">+</span></h2>
    <ul>
        <li>Пункт №5</li>
        <li>Пункт №6</li>
        <li>Пункт №7</li>
        <li>Пункт №8</li>
    </ul>
</div>
<div class="box">
    <h2>Список №3<span class="expand">+</span></h2>
    <ul>
        <li>Пункт №9</li>
        <li>Пункт №10</li>
        <li>Пункт №11</li>
        <li>Пункт №12</li>
    </ul>
</div>
<div class="box">
    <h2>Список №4<span class="expand">+</span></h2>
    <ul>
        <li>Пункт №5</li>
        <li>Пункт №6</li>
        <li>Пункт №7</li>
        <li>Пункт №8</li>
    </ul>
</div>
</aside>
<script type="text/javascript">
   $(document).ready(function()
   {
      $("ul").hide();
      $("ul li:odd").css("background-color", "#efefef");
      $("h2 span").click(function()
      {
         $(this).parent().next().slideToggle();
      });
   });
</script>
</body>
</html>
 
Посмотри у меня в подписи, есть несколько вариантов.
Вот как пример: _coder.hol.es/archive/spoiler_jq
Страницы: 1
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
20:33 Ап выдачи Яндекса 8 апреля - есть движение, но интереснее что творится с AI-ответами Google 
15:45 Смотреть здесь 
15:33 опубликовано здесь 
13:50 Штрафы за крипту до 2 млн + ап Яндекса 19 апреля - что опять поменяли и куда всё катится? 
12:39 В Яндексе позиции держатся, а трафик проседает - стало заметно сильнее 
12:32 Яндекс-ап 20 марта и похороны ChatGPT, Claude и Gemini. Считаем убытки 
23:03 monetizer.agency – рекламная сеть для взрослого и развлекательного трафика. 100$ новому вебмастеру 
20:35 Продам сайт - продукты питания 
16:38 Продам Домен: 6bc.ru 
15:43 Продам аккаунты Gmail USA IP | Gmail MIX IP | Outlook Old 
15:12 Betatransfer.net - обменник электронных валют 
13:24 EM24.biz - обмен валют 
11:11 Вериф аккаунты АВИТО + платежи 
10:05 Мониторинг обменников Сrypto-scout.io 
20:36 Точные прогнозы на футбол 
20:31 Во Франции начали штрафовать за IPTV - до 300-400 евро уже прилетает обычным пользователям 
12:37 Список обновленных тем пуст... 
12:34 Осталось 3-5 месяцев до блокировки YouTube в России, — заявил Клименко 
23:00 арбитражники 
18:58 Ставки на супер тренды в спорте 
21:08 Подтягиваем физкультурку