Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.07.2011, 14:23
Интересующийся
Отправить личное сообщение для AllanZ Посмотреть профиль Найти все сообщения от AllanZ
 
Регистрация: 15.04.2011
Сообщений: 15

Открыть/скрыть блок
Здравствуйте! Помогите пожалуйста разобраться.

Мне нужен простенький блок (<div>), который будет открываться/скрываться (display: block/none; ) при нажатии на ссылку.

Желательно помоч реализовать через функцию function showhide(cat), где cat имя CSS класса блока который надо скрыть.

Пытался сделать сам, но знаний не хватает.

PS: еще раз благодарю.

Последний раз редактировалось AllanZ, 20.07.2011 в 14:56.
Ответить с цитированием
  #2 (permalink)  
Старый 20.07.2011, 15:00
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

<style>
#cont h3 {
 border-width: 2px 2px 0;
 border-style: solid;
 border-color: #000;
 margin-bottom: 0;
}

#cont div {
 border-width: 0 2px 2px;
 border-style: solid;
 border-color: #000;
}

#cont.hide div { display: none }
#cont.hide h3 {border-bottom-width: 2px}
</style>
<div id="cont">
<h3>Заголовок</h3>
<div>text<br>text<br>text<br>text<br></div>
</div>
<script>
document.getElementById("cont").getElementsByTagName("h3")[0].onclick=function() {
 this.parentNode.className= this.parentNode.className ? "":"hide";
}
</script>


Вот так можно, например.
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #3 (permalink)  
Старый 20.07.2011, 15:25
Интересующийся
Отправить личное сообщение для AllanZ Посмотреть профиль Найти все сообщения от AllanZ
 
Регистрация: 15.04.2011
Сообщений: 15

trikadin,
Пример делает то что нужно, но в моем случае не совсем подходит.
Как бы вместо того чтобы класс дописывался, как тут:
this.parentNode.className ? "":"hide";

Сделать смену display: none; на display: block;

PS: Но за пример спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 20.07.2011, 15:48
Интересующийся
Отправить личное сообщение для AllanZ Посмотреть профиль Найти все сообщения от AllanZ
 
Регистрация: 15.04.2011
Сообщений: 15

Сам собрал, но только несколько нажатий работает, потом перестает:

<script type="text/javascript">
function showhide(elem) {
document.getElementsByClassName(elem)[0].style.display = document.getElementsByClassName(elem)[0].style.display ? 'block':'none';
}
</script>
<a class="show" style="display: block" onclick="showhide('hide');" href="#">Открыть</a>
<div class="hide" style="display: none">
#1234567890#
</div>
Ответить с цитированием
  #5 (permalink)  
Старый 20.07.2011, 16:00
Аватар для trikadin
Модератор
Отправить личное сообщение для trikadin Посмотреть профиль Найти все сообщения от trikadin
 
Регистрация: 27.04.2010
Сообщений: 3,417

Сообщение от AllanZ
document.getElementsByClassName(elem)[0].style.display ? 'block':'none';
Заменить на
document.getElementsByClassName(elem)[0].style.display ? '':'none';
__________________
Читайте:
Ты любопытный) Всё-таки, ничему в этом мире не помешает хорошая доля юмора)
Как спросить, чтобы вам ответили
Часто Задаваемые Вопросы (FAQ)
Ответить с цитированием
  #6 (permalink)  
Старый 20.07.2011, 16:53
Интересующийся
Отправить личное сообщение для AllanZ Посмотреть профиль Найти все сообщения от AllanZ
 
Регистрация: 15.04.2011
Сообщений: 15

trikadin,
Ступил...спасибо что помогли разобраться!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Показать/скрыть блок Lelja_05 jQuery 10 01.07.2013 20:05
Блок как на Цетис Axios Элементы интерфейса 6 16.03.2011 23:36
Блок с сообщением - Javascript или jQuery qwermjk Общие вопросы Javascript 3 12.07.2010 09:48
Фиксированный блок kakarotto Элементы интерфейса 2 09.07.2010 00:20
Всплываюший блок! daron jQuery 5 14.05.2010 11:20