Hello.

I liked the accordion menu http://ruseller.com/lessons/les306/example/index.html.

Here is the code:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Меню в виде аккордеона для Вашего сайта</title> <script type="text/javascript" language="javascript" src="jquery.js"></script> <style type="text/css"> body { margin: 10px auto; font: 75%/120% Verdana,Arial, Helvetica, sans-serif; } .menu_list { width: 150px; } .menu_head { padding: 5px 10px; cursor: pointer; position: relative; margin:1px; font-weight:bold; background: #333 url(images/left.png) center right no-repeat; color:#fff; } .menu_body { display:none; } .menu_body a{ display:block; color:#555; background-color:#999; padding-left:10px; font-weight:bold; text-decoration:none; } .menu_body a:hover{ color: #333; text-decoration:underline; } </style> </head> <body> <div style="float:left" > <div id="firstpane" class="menu_list"> <p class="menu_head">Меню</p> <div class="menu_body"> <a href="#">Главная</a> <a href="#">Форум</a> <a href="#">Блог</a> <a href="#">Контакты</a> <a href="#">О проекте</a> </div> <p class="menu_head">Публикации</p> <div class="menu_body"> <a href="#">Новости</a> <a href="#">Статьи</a> <a href="#">Закачки</a> </div> <p class="menu_head">Профиль</p> <div class="menu_body"> <a href="#">Мои друзья</a> <a href="#">Мои сообщения</a> <a href="#">Мои файлы</a> <a href="#">Выйти</a> </div> </div> </div> <script type="text/javascript"> $(document).ready(function() { $("#firstpane p.menu_head").click(function() { $(this).css({backgroundImage:"url(images/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow"); $(this).siblings().css({backgroundImage:"url(images/left.png)"}); }); }); </script> </body> </html>

Tell me please. I want this menu to be closed with javascript, i.e. if the user has javascript disabled in the browser, the menu is displayed in expanded form. If you remove the styles .menu_body {display:none;} , then it will unfold. How to minimize it with javascript?

  • Iranda, with pleasure. I click on the checkbox - nothing changes. Probably noted. If not, please tell us how to do it correctly. - Dmitry80

1 answer 1

Is something special need to invent?

 $("div.menu_body").hide();
  • Yes it works))). Thank you very much. - Dmitry80
  • Wellcome! Sorry, that in perfect English ;) - Deonis