Пример:
У блока, который хотим открывать ставим display: nonе. При помощи js ставим обработчик на кнопку, который при нажатии изменяет display: none на display: block
Как добавить на сайт:
Шаг 1) добавить HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a class="btn">Кликни по мне</a>
<div class="block_with_text">Lorem ipsum dolor sit amet</div>
Шаг 2) добавить CSS:
.container-box{padding:30px;margin-top:30px;border:2px solid #ddd;}
.btn{background-color:#007af5;color:#fff;padding:10px 20px;border-radius:10px;cursor:pointer;}
.block_with_text{display:none;}
.block_with_text{background-color:#007af5;max-width:200px;padding:30px;margin-top:15px;}
Шаг 3) добавить JavaScript:
$('.btn').click(function(){
$(".block_with_text").fadeToggle(0);
});

Отправить комментарий
0 Комментарии