Полезные статьи о разработке сайтов от вебмастера
Раскрывающийся блок DIV
Категория:
18 Сен 2011Когда быстро необходимо найти простое лёгкое решение для реализации раскрывающегося блока по ссылке, можно использовать следующее решение.
В <head> разместите код
<style type="text/css">
<!--
.togblock {
display:none;
text-align:inherit
}
-->
</style>
<script type="text/javascript">
$(document).ready(function() {$('#toglink0').click(
function() {
if ( jQuery.browser.msie && parseInt(jQuery.browser.version) == 6) {
if ($('#togblock1').css("display")=="block") {$('#togblock0').css("display", "none");
} else {$('#togblock0').css("display", "block");
}
} else {$('#togblock0').toggle("slow");
}
if ($('#toglink0').text()=='раскрыть...') {$('#toglink0').text('...скрыть');
} else {$('#toglink0').text('раскрыть...');
}
});
});
</script>
Также если у вас не подключена библиотека jQuery, то необходимо её подключить
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
Далее внутри <body>
<a href="javascript:void(0)" id="toglink0">раскрыть...</a> <div class="togblock" id="togblock0"> Текст внутри раскрывающегося блока! </div>
Получился довольно неплохой выпадающий блок с контентом! 
- Метки: , , ,
Кстати, очень интересно:
Написать комментарий
- Записи (RSS)
- Комментарии (RSS)
О блоге
Данный блог создан с целью помочь, как начинающему вебмастеру, так и опытному разработчику, в решении проблем возникающих при разработке сайтов. Здесь Вы прочитаете полезные статьи о том, как грамотно произвести SEO оптимизацию своего сайта, и найдёте важные исследования в сфере интернет-маркетинга. Научитесь писать собственные компоненты и модули для известных CMS, а также узнаете интересные методы работы с Фреймворками, CSS, HTML, jQuery и PHP. Из записей блога вы поймёте как грамотно разрабатывать макеты сайтов и что такое валидная вёрстка. БЛОГZOR – поможет Вам стать web-Гуру и понять тонкости веб-мастеринга.
Категории
- Bitrix (2)
- DLE (1)
- Joomla (2)
- SEO (2)
- WebAsyst (4)
- WordPress (1)
- Веб-программирование (16)
- Интересное (7)
- Полезные заметки (16)
- Разработка сайтов (3)
Комментариев к записи: 14
Ruslan
25 Ноябрь 2011 в 11:48 дп
Добрый день.
Отличный скрипт. Вот только у меня по умолчанию текст внутри раскрывающегося блока виден, а хотелось бы, чтобы он скрывался, и отображался при нажатии ссылки. Но сам скрипт работает исправно, при нажатии ссылки скрывает и отображает
blogz0r Ответил:
25 Ноябрь 2011 в 1:44 пп
Для того, чтобы по умолчанию текст внутри дива не был виден в строке –
div id="togblock0"добавьтеclass="togblock", т.е. должно быть так –div class="togblock" id="togblock0".Пост поправил.
28 Ноябрь 2011 в 5:09 дп
Работает!!!
Татьяна
10 Апрель 2012 в 11:38 дп
А если нужно что бы был не один блок, а несколько?
САня
13 Январь 2013 в 12:56 пп
И на нескольких блоках все заглохло ))) Блин, а как раз это и нужно…
Вася
14 Апрель 2013 в 8:04 пп
А текст свернуть, развернуть на картинку как сменить?
23 Июль 2013 в 6:53 пп
Зря ты для такой простой задачи JQuery используешь…
23 Июль 2013 в 6:54 пп
А если и используешь, то глянь в сторону fadeIn() и fadeOut()
knower
30 Октябрь 2013 в 12:45 дп
есть покороче скриптик
Ilya Ответил:
18 Май 2014 в 5:50 пп
отличное простое решение, но как сделать блок по умолчанию скрытый?
Алексей Ответил:
22 Май 2014 в 6:50 пп
В том примере для это нужно заменить у раскрывающегося блока атрибут display с block на none, т.е. должно бытьтекст. Ну и соответственно поменять саму ссылку «Скрать/показать»
Максим
2 Апрель 2014 в 10:33 пп
Добрый день!
Спасибо, отличное решение!
Подскажите как добавить css для «Раскрыть и скрыть»
Заранее спасибо!
Алексей Ответил:
7 Апрель 2014 в 5:56 пп
Очень просто, Вам необходимо использовать id ссылки (#toglink0). Так, например, если Вы хотите сделать текст «раскрыть/скрыть» жирным шрифтом и белого цвета то это будет выглядеть так:
#toglink0{
font-weight: bold;
color: #FFF;
}
7 Январь 2017 в 7:27 пп
Все нравится, единственное, раскрывающийся блок можно реализовать немного проще. Подключается в примере 2 скрипта, а это +2 запроса и дополнительный вес. А так, спасибо.