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 просмотра]