Отново спойлер в публикация

Здравейте приятели, гости и читатели на Blogzablogove.com. През изминалата година ви предложих две мои публикации за това, как да си направите прост спойлер. Спойлер, чрез който можете да скриете част от публикацията си. Днес ще добавя още един вариант за скривате на текст или друга ваша публикувана информация.
Спойлерът в този вариант ще се отвори, когато се натисне бутон, чийто дизайн лесно можете да настроите според вашия вкус. Кодът е без каквито и да е библиотеки, на чист CSS код. Много лек и приятен на външен вид. И веднага ви го показвам.

Информацията е

тук

А сега да видим какво се крие тук...




Тук е цялата ваша информация, който ще се отвори, когато щракнете върху бутона. Може да е красиво изображение, код, контактна форма или всяко друго нещо, което искате да скриете. Впишете готовия код в 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>

Всичко, което съм отбелязала с различни цветове, може да се променя според дизайна ви. Цвета на бутона, фона на самия спойлер, съответно и надписите, и това, което е скрито от очите на читателите.

Желая успех през настъпилата 2018 година.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: