1

Как показать при нажатии на кнопку полный текст, который скрыт?

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 ответа 3

3

$('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>

3
  • Разрешите Вас поздравить с круглой цифрой! 19 мар 2020 в 14:21
  • @Alexandr_TT Большое спасибо!
    – user176262
    19 мар 2020 в 14:22
  • @Sevastopol' Благодарю!
    – user176262
    19 мар 2020 в 14:31
2

Вот решение на случай, если на странице может быть не один скрытый блок. Кроме этого, при клике на кнопку меняется текст кнопки открыть/закрыть. Ну и бонусом добавил еще небольшую анимацию для кнопки.

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>

2

    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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки