Спойлер с кнопкой CSS

Ещё один вариант скрытого текста. Сам же спойлер в этом исполнении будет открываться при нажатии на кнопку, дизайн которой, вы с лёгкостью сможете подогнать на свой вкус. Код без всяких библиотек, на чистом CSS. Поэтому достаточно лёгкий. Вот и пример сразу. Вот и сам фокус: http://www.shpargalochki.ru/2018/01/spojler-s-knopkoj-css.html Здесь текст, который откроется при нажатии на кнопку. Или красивая картинка, код, форма связи - да и мало ли что ещё можно спрятать. Готовый код устанавливайте в режиме HTML в нужном месте сообщения. <style>.spoiler .spoiler_title {   display: inline;   float: left;   margin: 3px 10px 0 0;   padding: 4px 0;   font-size: 16px;   line-height: 1; } .spoiler label {   cursor: pointer;   background: #4682B4;   margin: 0;   padding: 4px 18px 4px 22px;   outline: none;   border-radius: 3px;   color: #efefef;   transition: all .3s ease-in-out;   display: inline;   font-size: 12px;   font-family: arial, san-serif;   line-height: 1;   position: relative; } .spoiler input[type=checkbox] ~ label:before {   content: "";   height: 0;   width: 0;   border-width: 4px 4px 4px 7px;   border-style: solid;   border-color: transparent transparent transparent #fff;   position: absolute;   top: 7px;   left: 8px; } .spoiler input[type=checkbox]:checked ~ label:before {   content: "";   height: 0;   width: 0;   border-width: 7px 4px 4px 4px;   border-style: solid;   border-color: #fff transparent transparent transparent;   position: absolute;   top: 8px;   left: 8px; } .spoiler input {   position: absolute;   left: -999em;   opacity: 0; } .spoiler .content_box {   width: 100%;   border: 1px solid #ddd;   background: #efefef;   height: auto;   padding: 6px 10px;   margin: 8px 0 0;   overflow: hidden;   -moz-box-sizing: border-box;   -webkit-box-sizing: border-box;   box-sizing: border-box; } .spoiler .content_box .content {   display: none; } .spoiler .content p {   padding: 0;   margin: 0 } .spoiler .content p img {   margin: 4px 0 0;   max-width: 100%;   height: auto; } .spoiler input[type=checkbox]:checked ~ .content_box .content {   display: block;   -webkit-animation: slide-down .3s ease-out;   -moz-animation: slide-down .3s ease-out; } @-webkit-keyframes slide-down {   0% {     opacity: 0;     -webkit-transform: translateY(-100%)   }   100% {     opacity: 1;     -webkit-transform: translateY(0)   } } @-moz-keyframes slide-down {   0% {     opacity: 0;     -moz-transform: translateY(-100%)   }   100% {     opacity: 1;     -moz-transform: translateY(0)   } }</style> <br /> <div class="spoiler"> <span class="spoiler_title"> информация: </span>   <input id="item-1" type="checkbox" />   <label for="item-1">здесь</label><br /> <div class="content_box"> <div class="content"> А вот и сам фокус<br /> <br /> Здесь всё что  откроется при нажатии на кнопку</div> </div> </div> Всё, чтоотмеченно меняйте под ваш дизайн. Соответственно, и надписи, и то что скрыли от глаз.