Полезные статьи о разработке сайтов от вебмастера
Категория:
Когда быстро необходимо найти простое лёгкое решение для реализации раскрывающегося блока по ссылке, можно использовать следующее решение.
В <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>
Получился довольно неплохой выпадающий блок с контентом!
Кстати, очень интересно:
Данный блог создан с целью помочь, как начинающему вебмастеру, так и опытному разработчику, в решении проблем возникающих при разработке сайтов. Здесь Вы прочитаете полезные статьи о том, как грамотно произвести SEO оптимизацию своего сайта, и найдёте важные исследования в сфере интернет-маркетинга. Научитесь писать собственные компоненты и модули для известных CMS, а также узнаете интересные методы работы с Фреймворками, CSS, HTML, jQuery и PHP. Из записей блога вы поймёте как грамотно разрабатывать макеты сайтов и что такое валидная вёрстка. БЛОГZOR – поможет Вам стать web-Гуру и понять тонкости веб-мастеринга.
Комментариев к записи: 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 дп
есть покороче скриптик
http://miladyad.ru/web-mastering/stati-pro-javascript/152-pokazat-skryt-blok-na-javascript
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 запроса и дополнительный вес. А так, спасибо.