БлогNot. Javascript: самый простой способ открыть блок текста при нажатии

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

То есть, изначально часть текста в разделе скрыта, при нажатии на ссылку он открывается полностью.

Фреймворков не нужно, только чистый HTML+CSS+Javascript, вот листинг примера:

<style type="text/css">
.divbox {
 overflow: hidden;
 height: 100px;
 width: 80%;
 transition: all 0.5s;
 border: 1px dotted black;
}
.open{
  height: 500px;
}
</style>
<div class="divbox" id="box">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ut recusandae dolorem 
 fugit soluta debitis sint similique esse quasi vero sit consequuntur tempora rerum temporibus 
 dignissimos quidem, quo, ducimus nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing 
 elit. Consequatur ut recusandae dolorem fugit soluta debitis sint similique esse quasi vero 
 sit consequuntur tempora rerum temporibus dignissimos quidem, quo, ducimus nostrum! Lorem 
 ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ut recusandae dolorem 
 fugit soluta debitis sint similique esse quasi vero sit consequuntur tempora rerum 
 temporibus dignissimos quidem, quo, ducimus nostrum! Lorem ipsum dolor sit amet, 
 consectetur adipisicing elit. Consequatur ut recusandae dolorem fugit soluta 
 debitis sint similique esse quasi vero sit consequuntur tempora rerum temporibus 
 dignissimos quidem, quo, ducimus nostrum! Lorem ipsum dolor sit amet, consectetur 
 adipisicing elit. Consequatur ut recusandae dolorem fugit soluta debitis sint 
 similique esse quasi vero sit consequuntur tempora rerum temporibus dignissimos 
 quidem, quo, ducimus nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 Consequatur ut recusandae dolorem fugit soluta debitis sint similique esse quasi vero 
 sit consequuntur tempora rerum temporibus dignissimos quidem, quo, ducimus nostrum!
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur ut recusandae 
 dolorem fugit soluta debitis sint similique esse quasi vero sit consequuntur tempora 
 rerum temporibus dignissimos quidem, quo, ducimus nostrum! Lorem ipsum dolor sit amet, 
 consectetur adipisicing elit. Consequatur ut recusandae dolorem fugit soluta debitis 
 sint similique esse quasi vero sit consequuntur tempora rerum temporibus dignissimos 
 quidem, quo, ducimus nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 Consequatur ut recusandae dolorem fugit soluta debitis sint similique esse quasi vero 
 sit consequuntur tempora rerum temporibus dignissimos quidem, quo, ducimus nostrum!
</div>
<p><a id="link" href="#" onclick="return false;">Открыть</a></p>
<script type="text/javascript">
 var lnk = document.getElementById('link');
 box = document.getElementById('box');
 lnk.onclick = function() { box.classList.add('open'); }
</script>

Если сохранить в файл .html и выполнить, открыв документ в браузере по умолчанию (то есть, по протоколу file://, а не на хосте), то тоже должно сработать, по крайней мере, у меня случилось так в Firefox и IE11.

Ещё лучше просто использовать стандартную пару тегов details - summary.

19.03.2017, 21:25 [3552 просмотра]


теги: css html javascript

К этой статье пока нет комментариев, Ваш будет первым