+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Показать скрыть текст div jQuery, скрыть показать div по клику

Иногда на сайте нужно сделать возможность скрывать определенный текст и показывать его только после нажатия на ссылку. Используем для этого javascript.

Вариант первый.
Пишем вот такой простой скрипт:
function onoff(t){
p=document.getElementById(t);
if(p.style.display=="none"){
p.style.display="block";}
else{
p.style.display="none";}
}
<div id="div1" style="display:none;">Скрытый текст</div>
<a href="javascript:onoff('div1');">показать/скрыть</a>
Если у вас таких блоков больше чем один, просто меняйте ID DIV. Можно указать не только цифру, вы можете написать что-нибудь, так будет потом проще разобраться.

Вариант второй.
Мы чуть-чуть изменим код и при нажатии на ссылку будет изменяться надпись "показать-скрыть"
function look(t){
p=document.getElementById(t);
l=document.getElementById("a-"+t);
if(p.style.display=="none"){
l.innerHTML="скрыть";
p.style.display="block";}
else{
l.innerHTML="показать";
p.style.display="none";}
}
<div id="text1" style="display:none; text-align:justify;">Скрытый текст</div> 
<a href="javascript:look('text1');" id="a-text1">показать</a>
Вариант третий.
Для его реализации нам понадобится библиотека jquery.js
Подключаем библиотеку:
<script type="text/javascript" src="jquery.js"></script>
$(document).ready(function(){
$('#link1').click(function(){
if(jQuery.browser.msie && parseInt(jQuery.browser.version)==6){
if($('#look1').css("display")=="block"){
$('#look1').css("display", "none");
}
else{
$('#look1').css("display", "block");
}
}
else{
$('#look1').toggle("slow");
}
if($('#link1').text()=='подробнее'){
$('#link1').text('кратко');
}
else{
$('#link1').text('подробнее');
}
});
});
<div id="look1" style="display:none;">Скрытый текст</div>
<a href="javascript:void(0);" id="link1">подробнее</a>
Этот вариант может не работать в старых версиях IE

Демонстрация


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 47624