Данный скрипт написан мной по просьбе пользователя данного сайта суть скрипта проста открыть и закрыть блок и сохранить его положения после обновления страницы. Подобных скриптов очень много в интернете и может быть даже есть на данном сайте я не проверял утверждать не буду но не суть скрипт написан а значит пора им поделится с вами. Также на нем подключены шрифтовые иконки, что можно даже поставить по тематике.
Установка: Копируем код ниже и вставляем в нужное место.
Код
<div id="top_mybc">
<b>А вы знали, что … </b>
<span onclick="$('.inf_myb').slideToggle('slow');" class="my_bc_sp">
<i class="fa fa-angle-up my_bc_ok" aria-hidden="true"></i>
<i class="fa fa-angle-down my_bc_no" aria-hidden="true"></i>
</span>
<div style="clear: both;"></div>
</div>
<div class="inf_myb">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li>
<li>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit, sed do eiusmod
tempor incididunt ut <a href="">labore et </a>dolore magna aliqua. Ut enim ad minim veniam,</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li>
</ul>
</div>
В данный блок я поместил контент для того чтоб придать ему вид и он соответствовал просьбе
no_matter вы же можете удалить полностью блок ul и всё что в нём есть что вставить его вот так.
Код
<div id="top_mybc">
<b>А вы знали, что … </b>
<span onclick="$('.inf_myb').slideToggle('slow');" class="my_bc_sp">
<i class="fa fa-angle-up my_bc_ok" aria-hidden="true"></i>
<i class="fa fa-angle-down my_bc_no" aria-hidden="true"></i>
</span>
<div style="clear: both;"></div>
</div>
<div class="inf_myb">
ТУТ ВАШ КОНТЕНТ ИЛИ ОПЕРАТОР НЕ ВАЖНО ЧТО ВАМ ХОЧЕТСЯ ТО РАЗМЕЩАЕМ
</div>
Теперь подключим стили для этого копируем код ниже и вставляем
в таблицу стилей в самый конец
Код
#top_mybc {
padding: 10px;
color: #000;
font-weight: bold;
width: 100%;
display: block;
font-size: 18px;
position: relative;
}
#top_mybc b {
display: block;
float: left;
}
#top_mybc span {
display: block;
position: absolute;
right: 10px;
color: #8F95A3;
cursor: pointer;
}
#top_mybc i {
font-size: 36px;
font-weight: bold;
}
.inf_myb {
display: block;
}
.inf_myb ul {
list-style: none;
padding: 10px;
}
.inf_myb ul li {
margin: 15px 0px;
padding: 10px;
border-left: 3px solid #DEDFE3;
background: #F4F4F6;
}
.inf_myb ul li a {
color: #F26739;
}
.my_bc_no {display: none;}
.dop_my_bc_ok {display: none;}
.dop_my_bc_no {display: block;}
.dop_inf_myb {display: none;}
Важно те кто будет ставить другой контент удалите
из стилей следующие строчки.
Код
.inf_myb ul {
list-style: none;
padding: 10px;
}
.inf_myb ul li {
margin: 15px 0px;
padding: 10px;
border-left: 3px solid #DEDFE3;
background: #F4F4F6;
}
.inf_myb ul li a {
color: #F26739;
}
Они вам не нужны
Теперь для отображения стрелок я использовал шрифтовые иконки от fontawesome а это значит что нам их тоже нужно подключить для этого разместим код ниже в самый верх вашей
таблицы стилей Код
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);
у тек у кого уже подключен данный шрифт вам этот пункт нужно пропустить
Теперь подключим сам скрипт
я размещал его перед закрывающим тегом
/body на той странице
где будет стоять наш блок
если у вас вдруг не будет работать данный скрипт переместите его в
head Код
<script src="/js/cookied_g.js"></script>
На этом всё вам осталось скачать архив и залить файл на ваш сайт в файловый менеджер в папку
js если нет такой папки то создайте её.
Источник: ZoRnEt.ru
Не выводит сообщения в чат.
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
