Нашел простую функцию для отображения и скрытия блоков, но не знаю как доработать, js только начал изучать, Так вот какое условие нужно вставить чтобы при клике на заголовок1 открывался блок с текст1 но если открыт блок с текст2 то текст2 закрывался и наоборот, т.е. при клике по одному он открываеться но закрывает другой И если возможно подскажите как сделать открытие блоков плавным? Код (Text): <style type='text/css'> .headline {border: 0px solid #000000; cursor: pointer; text-align: left; text-decoration: underline;} .hidden {display: none; border: 1px solid #ff0000; text-align: left; margin-top: 2px;} </style> <script type="text/javascript"> function show(ele) { var srcElement = document.getElementById(ele); if(srcElement != null) { if(srcElement.style.display == "block") { srcElement.style.display= 'none'; } else { srcElement.style.display='block'; } } } </script> <div class="headline" onclick="show('cat1')"><strong> заголовок1 </strong></div> <div class="hidden" id="cat1"> <p> текст1 </p> </div> <div class="headline" onclick="show('cat2')"><strong> заголовок2 </strong></div> <div class="hidden" id="cat2"> <p> текст2 </p> </div>
Спасибо но мне не подойдет аккордеон на моем сайте не встроить, дизайн не позволяет, у меня ссылка в одном месте блок открывается в другом)
если есть jQuery то: Код (Text): $(".headline").click(function(){ $(".your_class").addClass("hidden"); $(this).children().eq(1).removeClass("hidden"); }); Добавлено спустя 4 минуты 49 секунд: и не забыть дивам дать класс your_class Добавлено спустя 3 минуты 17 секунд: плавно Код (Text): $(".headline").click(function(){ $(".your_class:visible").slideUp(); $(this).children().eq(1).slideDown(); }); Добавлено спустя 39 секунд: а может и не работает
Код (Text): function oc_usr_menu() { if(document.getElementById('usr_menu').style.display == 'block'){ document.getElementById('usr_menu').style.display = 'none'; document.getElementById('srch_menu').style.display = 'none'; } else { document.getElementById('usr_menu').style.display = 'block'; document.getElementById('srch_menu').style.display = 'none'; } } function oc_srch_menu() { if(document.getElementById('srch_menu').style.display == 'block'){ document.getElementById('srch_menu').style.display = 'none'; document.getElementById('usr_menu').style.display = 'none'; } else { document.getElementById('srch_menu').style.display = 'block'; document.getElementById('usr_menu').style.display = 'none'; } } А запустить скрипт можно так Код (Text): <a href="javascript:oc_usr_menu();">Первое меню</a> <a href="javascript:oc_srch_menu();">Второе меню</a> <div id="usr_menu"> Содержимое меню 1 </div> <div id="srch_menu"> Содержимое меню 2 </div> С переменными поиграйте сами. Все.
Тогда уж так Код (Text): $(document).ready(function (){ $("#example_j a").click(function(){ $(".slide_j").slideToggle(1000); return false }); }); Код (Text): <style> #example_j {border:solid 1px #999; margin-bottom:10px; padding:5px; height:70px; min-height:50px} .slide_j {height:50px; width:100px; float:left; background:#0CF; margin:5px} </style> <div id="example_j"> <a href="#">Показать/Скрыть</a> <div class="slide_j"></div> <div class="slide_j"></div> <div class="slide_j"></div> <div style="clear:both"></div> <span></span> </div>
Я вам не говорил, его встраивать, посмотрите как реализованы действия и сделайте у себя. И вообще нет такого, что якобы нельзя встроить, тут из - за рук зависит и мозгов в целом.
можно просто проверять видимость Код (Text): $(".headline").click(function(){ if($(this).next().css("display") == "none"){ $(".your_class:visible").slideUp(); $(this).next().slideDown(); } }); Добавлено спустя 1 минуту 29 секунд: Код (Text): <div class="headline">heaeder1</div> <div class="your_class"> item1 </div> <div class="headline">heaeder2</div> <div class="your_class" style="display:none;"> item2 </div> Добавлено спустя 2 минуты 26 секунд: а вообще, этот велик уже давно есть и ничего изобретать не надо Добавлено спустя 45 секунд: чет ссылку в цитате не обернуло