Код спойлера:
HTML
<input class=""spoilerbutton"" type=""button"" value=""Развернуть ▼"" ▼'?'Свернуть ▲':'Развернуть ▼';"">
<div class=""spoiler""><div>
<p>EXAMPLE</p><p>EXAMPLE</p><p>EXAMPLE</p>
</div></div>
CSS
.spoilerbutton {
display:block;
margin: 5px 0;
background-color: #57C8EB;
width: 138px;
height: 25px;
border: 2px solid #458CCC;
color: white;
font-weight: bold;
cursor: pointer;
}
.spoiler {
overflow:hidden;
background: #f5f5f5;
}
.spoiler > div {
-webkit-transition: all 0.2s ease;
-moz-transition: margin 0.2s ease;
-o-transition: all 0.2s ease;
transition: margin 0.2s ease;
}
.spoilerbutton[value=""Развернуть ▼""] + .spoiler > div {
margin-top:-100%;
}
.spoilerbutton[value=""Свернуть ▲""] + .spoiler {
padding:5px;
}
Посмотреть визуальный результат можно здесь:
Возможность вставки спойлера должна производиться например BB-кодом в текстовом редакторе админки и напрямую какой-либо вставкой в код. Возможность вставки абсолютно на любую страницу.
На фронте не должен использоваться Javascript, т.е. текст под спойлером должен нормально индексироваться ПС.
По расположению спойлер должен быть "утоплен" в футер по верхней границе, как на картинке.
Адрес сайта –