Отображение при клике + закрытие предыдущего
Здравствуйте.
Использую вот такой скрипт для отображения скрытого блока при клике на ссылку. Как можно модифицировать скрипт, чтобы можно было раскрывать два блока по очередности, т.е. для каждого блока своя ссылка. И при открытии второго блока, предыдущий чтобы закрывался? <script> $(function() { $(".show-block1").click(function() { $("#hide-block1").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script> <a class="show-block1" href="/">show block1</a> <div id="hide-block1" style="display:none;"> Содержимое блока 1 </div> |
Если структура постоянная (контроллер > блок, контроллер > блок, контр...),
тогда можно так: http://learn.javascript.ru/play/WQm9 В любом случае принцип такой: 1. Блокам добавить общий класс, по которому будем их скрывать. 2. При нажатии на любой контроллер скрываем все блоки по классу, кроме того который нужно отобразить. 3. Отображаем интересующий нас блок. |
Цитата:
А как сделать, если эти две ссылки у меня идут первыми в списке, а открывающиеся блоки внизу. Я поставил две ссылки рядом, блоки сместил вниз также рядом, и теперь открывается только один блок, а второй нет. |
Цитата:
|
Цитата:
Посмотреть <a id="showDiv1">show div 1</a> <a id="showDiv2">show div 2</a> <div id="div1">div1</div> <div id="div2">div2</div> $('#showDiv1').click(function(){ $('#div1').stop(true, true).slideDown('slow'); $('#div2').slideUp('slow'); }); $('#showDiv2').click(function(){ $('#div2').stop(true, true).slideDown('slow'); $('#div1').slideUp('slow'); }); |
Огромное спасибо, что помогаете)
В примере все работает как надо, а вот вставил в свой хтмл, и блок начинает раскрывается и тут же обратно скрывается. Что может быть не так? Привести свой хтмл в пример? |
А нет, примите извинения, все работает. В линк ссылки не то прописал.
Огромное человеческое спасибо Вам!:) С меня плюсик как минимум:) |
Цитата:
|
slideDown заменить на slideToggle.
Посмотреть <a id="showDiv1">show div 1</a> <a id="showDiv2">show div 2</a> <div id="div1">div1</div> <div id="div2">div2</div> $('#showDiv1').click(function(){ $('#div1').stop(true, true).slideToggle('slow'); $('#div2').slideUp('slow'); }); $('#showDiv2').click(function(){ $('#div2').stop(true, true).slideToggle('slow'); $('#div1').slideUp('slow'); }); |
Часовой пояс GMT +3, время: 07:31. |