11.12.2012
Количество показов: 10838
Java-скрипт открыть/скрыть область/текст.
Для того, чтобы самым простым способом открыть и скрыть область или текст, можно использовать самый простой Java-скрипт. Ниже его код, в котором разберется любой html-щик:
<div id="pokazat">
<a href="#" onClick="document.getElementById('pokazat').style.display='none';document.getElementById('skryt').style.display='';return false;">Показать текст </a>
</div>
<div id="skryt" style="display:none">
<p>Тут пишем текст, который нужно показывать и скрывать</p>
<a href="#" onClick="document.getElementById('skryt').style.display='none';document.getElementById('pokazat').style.display='';return false;">Скрыть текст</a>
</div>
или по одной кнопке:
<script>
function look(type){
param=document.getElementById(type);
if(param.style.display == "none") param.style.display = "block";
else param.style.display = "none"
}
</script>
<a href="#" onClick="look('div1'); return false;">показать/скрыть</a>
<div id="div1" style="display:none">
Скрытый текст
</div>
Показать/скрыть плавно по одной кнопке:
<a class="hideBtn" onclick="$('#hideCont1').slideToggle('normal');$(this).toggleClass('show');return false;">Дополнительные данные (для ускорения обработки заявки)</a>
<div id="hideCont1" class="hideCont1" style="display:none;">
Текст
</div>
Показать/скрыть плавно только часть блока, при этом сменить название кнопки:
<style>
.readMoreContent {
height: 600px;
overflow:hidden;
}
</style>
<div class="readMoreContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere turpis non enim congue semper. Donec non mollis est, at ultricies tortor. Quisque luctus mollis velit, ut facilisis massa facilisis nec. Sed eu felis magna. Nam dui sem, mollis ut tellus finibus, interdum blandit eros. Curabitur efficitur libero vel tristique mollis. Donec tortor dui, ultricies a magna eget, tincidunt pharetra ipsum.
</div>
<div class="readMoreTrigger">Развернуть ▼<span class="button-arrow"></span></div>
<script>
$('.readMoreTrigger').click(function () {
if ($('.readMoreContent').data('shown')) {
$(this).html('Развернуть ▼');
$('.readMoreContent').animate({
"height": "300px"
}, 'fast');
$('.readMoreContent').data('shown',false);
} else {
$(this).html('Свернуть ▲');
$('.readMoreContent').animate({
"height": $('.readMoreContent').data("orig_height")
}, 'fast');
$('.readMoreContent').data('shown',true);
}
/*$('.readMoreContent').slideUp('fast');
if($(this).prev().is(':hidden') == true) {
$(this).prev().slideDown('fast');
$(this).text('Read less..')
}*/
});
/*$('.readMoreContent').hide();*/
$('.readMoreContent').data("orig_height", $('.readMoreContent').css("height")).css({
height: "300px"
});
</script>
Количество показов: 10838
