Как показать скрытый текст?
Как показать при нажатии на кнопку полный текст, который скрыт?
html {
width: 100%;
height: 100%;
overflow-x: hidden;
}
.more {
display: none;
overflow: hidden;
}
.content {
overflow: hidden;
width: 100%;
padding: 20px 20px 40px 20px;
margin-left: -10px;
margin-top: -10px;
background: maroon;
font-family: sans-serif;
}
.content p {
width: 80%;
line-height: 2;
font-size: 16px;
color: white;
}
.button {
margin-top: -20px;
padding: 10px;
width: 160px;
color: black;
font-weight: normal;
font-family: sans-serif;
background: goldenrod;
border-radius: 60px;
cursor: pointer;
}
.button:hover {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
<center>
<div class="content">
<p>С поверхности Земли человек видит купол неба по-разному: днем он может быть голубым и чистым, туманно-молочным, серым от свинцовых туч. Ночью – непроглядно-черным или иссиня-фиолетовым, покрытым миллиардом светящихся точек-звезд.</p>
<p class="more">То, как выглядит небо в глазах человека, зависит от времени года, места, из которого ведется наблюдение, времени суток и, конечно, погоды. Для характеристики неба ночью есть специальный термин – «звездное небо», означающий совокупность всех астрономических объектов, которые видны на небе в это время суток. Все мы знаем, что на закате или на рассвете небеса могут быть окрашены в разные оттенки сиреневого, розового, желтого. Если небо не затянуто тучами, то ночью на нем хорошо просматривается Луна, а днем – Солнце. Если же подняться вверх на самолете и взглянуть на небо словно «с другой стороны», шапки облаков снизу будут выглядеть как многослойная вата или взбитые сливки.</p>
</div>
<div class="button">Полный текст</div>
</center>
Ответы (3 шт):
Автор решения: Igor
→ Ссылка
$('center .button').click(function(){
$(this).closest('center').find('.content .more').toggle();
});
html {
width: 100%;
height: 100%;
overflow-x: hidden;
}
.more {
display: none;
overflow: hidden;
}
.content {
overflow: hidden;
width: 100%;
padding: 20px 20px 40px 20px;
margin-left: -10px;
margin-top: -10px;
background: maroon;
font-family: sans-serif;
}
.content p {
width: 80%;
line-height: 2;
font-size: 16px;
color: white;
}
.button {
margin-top: -20px;
padding: 10px;
width: 160px;
color: black;
font-weight: normal;
font-family: sans-serif;
background: goldenrod;
border-radius: 60px;
cursor: pointer;
}
.button:hover {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
<div class="content">
<p>С поверхности Земли человек видит купол неба по-разному: днем он может быть голубым и чистым, туманно-молочным, серым от свинцовых туч. Ночью – непроглядно-черным или иссиня-фиолетовым, покрытым миллиардом светящихся точек-звезд.</p>
<p class="more">То, как выглядит небо в глазах человека, зависит от времени года, места, из которого ведется наблюдение, времени суток и, конечно, погоды. Для характеристики неба ночью есть специальный термин – «звездное небо», означающий совокупность всех астрономических объектов, которые видны на небе в это время суток. Все мы знаем, что на закате или на рассвете небеса могут быть окрашены в разные оттенки сиреневого, розового, желтого. Если небо не затянуто тучами, то ночью на нем хорошо просматривается Луна, а днем – Солнце. Если же подняться вверх на самолете и взглянуть на небо словно «с другой стороны», шапки облаков снизу будут выглядеть как многослойная вата или взбитые сливки.</p>
</div>
<div class="button">Полный текст</div>
</center>
Автор решения: Denis640Kb
→ Ссылка
let fulltext = document.getElementsByClassName('more');
let but = document.getElementsByClassName('button');
but[0].onclick = function () {
fulltext[0].style.display = "block";
}
html {
width: 100%;
height: 100%;
overflow-x: hidden;
}
.more {
display: none;
overflow: hidden;
}
.content {
overflow: hidden;
width: 100%;
padding: 20px 20px 40px 20px;
margin-left: -10px;
margin-top: -10px;
background: maroon;
font-family: sans-serif;
}
.content p {
width: 80%;
line-height: 2;
font-size: 16px;
color: white;
}
.button {
margin-top: -20px;
padding: 10px;
width: 160px;
color: black;
font-weight: normal;
font-family: sans-serif;
background: goldenrod;
border-radius: 60px;
cursor: pointer;
}
.button:hover {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
<center>
<div class="content">
<p>С поверхности Земли человек видит купол неба по-разному: днем он может быть голубым и чистым, туманно-молочным, серым от свинцовых туч. Ночью – непроглядно-черным или иссиня-фиолетовым, покрытым миллиардом светящихся точек-звезд.</p>
<p class="more">То, как выглядит небо в глазах человека, зависит от времени года, места, из которого ведется наблюдение, времени суток и, конечно, погоды. Для характеристики неба ночью есть специальный термин – «звездное небо», означающий совокупность всех астрономических объектов, которые видны на небе в это время суток. Все мы знаем, что на закате или на рассвете небеса могут быть окрашены в разные оттенки сиреневого, розового, желтого. Если небо не затянуто тучами, то ночью на нем хорошо просматривается Луна, а днем – Солнце. Если же подняться вверх на самолете и взглянуть на небо словно «с другой стороны», шапки облаков снизу будут выглядеть как многослойная вата или взбитые сливки.</p>
</div>
<div class="button">Полный текст</div>
</center>
Автор решения: Sevastopol'
→ Ссылка
Вот решение на случай, если на странице может быть не один скрытый блок. Кроме этого, при клике на кнопку меняется текст кнопки открыть/закрыть. Ну и бонусом добавил еще небольшую анимацию для кнопки.
var i = 1;
$('#button' + i).click(function() {
var hideText = $('#more' + i);
$(this).toggleClass("button__active").text(hideText.is(':visible') ? 'Полный текст' : 'Скрыть');
hideText.slideToggle(350);
});
html {
width: 100%;
height: 100%;
overflow-x: hidden;
}
#more1 {
display: none;
overflow: hidden;
}
.content {
overflow: hidden;
width: 100%;
padding: 20px 20px 40px 20px;
margin-left: -10px;
margin-top: -10px;
background: maroon;
font-family: sans-serif;
transition: all 0.4s ease;
}
.content p {
width: 80%;
line-height: 2;
font-size: 16px;
color: white;
}
.button {
margin-top: -20px;
padding: 10px;
width: 160px;
color: black;
font-weight: normal;
font-family: sans-serif;
background: goldenrod;
border-radius: 60px;
cursor: pointer;
transform: scale(1);
transition: all 0.2s ease-in-out;
}
.button__active {
transform: scale(0.5);
}
.button:hover {
transition: all 0.4s ease;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
<div class="content">
<p>С поверхности Земли человек видит купол неба по-разному: днем он может быть голубым и чистым, туманно-молочным, серым от свинцовых туч. Ночью – непроглядно-черным или иссиня-фиолетовым, покрытым миллиардом светящихся точек-звезд.</p>
<p id="more1">
То, как выглядит небо в глазах человека, зависит от времени года, места, из которого ведется наблюдение, времени суток и, конечно, погоды. Для характеристики неба ночью есть специальный термин – «звездное небо», означающий совокупность всех астрономических
объектов, которые видны на небе в это время суток. Все мы знаем, что на закате или на рассвете небеса могут быть окрашены в разные оттенки сиреневого, розового, желтого. Если небо не затянуто тучами, то ночью на нем хорошо просматривается Луна,
а днем – Солнце. Если же подняться вверх на самолете и взглянуть на небо словно «с другой стороны», шапки облаков снизу будут выглядеть как многослойная вата или взбитые сливки.</p>
</div>
<div id="button1" class="button">Полный текст</div>
</center>