Стильные спойлеры на CSS3 и jQuery

Разместил: Apocalypse
Опубликовано: 13 марта 2016

Данное решение позволяет создавать очень стильные и простые спойлеры, в которые можно поместить любой ваш контент. Реализовано на CSS3 и jQuery Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

.wrapper {
width: 820px;
margin: 10px;
padding: 0;
}

.wrapper > li {
display: inline;
margin: 0;
}

.info-box-green, .info-box-red, .info-box-sky {
margin: 50px auto;
padding: 0;
width: 480px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}

.info-box-red h4 {
-webkit-border-radius: 10px;
border-radius: 10px;
margin-bottom: -10px;
}

.info-box-red > .info-content > .text {
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px; 
}

.info-box-green h4, .info-box-green > .info-content > .text {
background-color: #00AB83;
}

.info-box-red h4, .info-box-red > .info-content > .text {
background-color: #FF434C;
}

.info-box-sky h4, .info-box-sky > .info-content > .text {
background-color: #00A5C3;
}

.info-box-green h4, .info-box-red h4, .info-box-sky h4 {
padding: 25px;
font-size: 1.125em;
font-weight: 400;
color: #FFF;
}

.info-box-green > .info-content > .text, .info-box-red > .info-content > .text, .info-box-sky > .info-content > .text {
padding: 0px;
font-size: 1em;
line-height: 1.5em;
height: 0;
color: #FFF;
overflow: hidden;
-webkit-transition:  height 200ms ease;  
-moz-transition:  height 200ms ease;  
-o-transition:  height 200ms ease;  
transition:  height 200ms ease;
}

.info-box-green > .info-content > .text > p, .info-box-red > .info-content > .text > p, .info-box-sky > .info-content > .text > p {
padding: 20px 20px 60px;
}

.info-box-sky > .info-content > .text {
background-color: #FFF;
color: #444;
border-radius: 0;
}

.info-box-green > .info-content > .text.open-green, .info-box-red > .info-content > .text.open-red, .info-box-sky > .info-content > .text.open-sky {
display: block;
height: auto;
}

.info-box-green > .info-content > span.close-green, .info-box-red > .info-content > span.close-red, .info-box-sky > .info-content > span.close-sky {
-webkit-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-o-transform:rotate(135deg);
-ms-transform:rotate(135deg);
}

.info-box-green span, .info-box-red span, .info-box-sky span {
display: inline-block;
float: right;
position: relative;
bottom: 60px;
right: 10px;
margin: 0;
padding: 10px;
color: #FFF;
font-size: 2em;
cursor: pointer;
/*  Rotate '+' to 'X' */
-webkit-transition: all 600ms ease-in-out; 
-moz-transition: all 600ms ease-in-out; 
-o-transition: all 600ms ease-in-out; 
-ms-transition: all 600ms ease-in-out; 
transition: all 600ms ease-in-out;
}

.info-box-sky > .info-content > span.close-sky {
color: #444;
}

.info-box-red span {
position: relative;
bottom: 50px;
right: 10px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

.wrapper {

width: 820px;

margin: 10px;

padding: 0;

}

.wrapper > li {

display: inline;

margin: 0;

}

.info-box-green, .info-box-red, .info-box-sky {

margin: 50px auto;

padding: 0;

width: 480px;

-webkit-box-shadow: 0 8px 6px -6px black;

-moz-box-shadow: 0 8px 6px -6px black;

box-shadow: 0 8px 6px -6px black;

}

.info-box-red h4 {

-webkit-border-radius: 10px;

border-radius: 10px;

margin-bottom: -10px;

}

.info-box-red > .info-content > .text {

-webkit-border-radius: 0 0 10px 10px;

border-radius: 0 0 10px 10px;

}

.info-box-green h4, .info-box-green > .info-content > .text {

background-color: #00AB83;

}

.info-box-red h4, .info-box-red > .info-content > .text {

background-color: #FF434C;

}

.info-box-sky h4, .info-box-sky > .info-content > .text {

background-color: #00A5C3;

}

.info-box-green h4, .info-box-red h4, .info-box-sky h4 {

padding: 25px;

font-size: 1.125em;

font-weight: 400;

color: #FFF;

}

.info-box-green > .info-content > .text, .info-box-red > .info-content > .text, .info-box-sky > .info-content > .text {

padding: 0px;

font-size: 1em;

line-height: 1.5em;

height: 0;

color: #FFF;

overflow: hidden;

-webkit-transition: height 200ms ease;

-moz-transition: height 200ms ease;

-o-transition: height 200ms ease;

transition: height 200ms ease;

}

.info-box-green > .info-content > .text > p, .info-box-red > .info-content > .text > p, .info-box-sky > .info-content > .text > p {

padding: 20px 20px 60px;

}

.info-box-sky > .info-content > .text {

background-color: #FFF;

color: #444;

border-radius: 0;

}

.info-box-green > .info-content > .text.open-green, .info-box-red > .info-content > .text.open-red, .info-box-sky > .info-content > .text.open-sky {

display: block;

height: auto;

}

.info-box-green > .info-content > span.close-green, .info-box-red > .info-content > span.close-red, .info-box-sky > .info-content > span.close-sky {

-webkit-transform:rotate(135deg);

-moz-transform:rotate(135deg);

-o-transform:rotate(135deg);

-ms-transform:rotate(135deg);

}

.info-box-green span, .info-box-red span, .info-box-sky span {

display: inline-block;

float: right;

position: relative;

bottom: 60px;

right: 10px;

margin: 0;

padding: 10px;

color: #FFF;

font-size: 2em;

cursor: pointer;

/* Rotate '+' to 'X' */

-webkit-transition: all 600ms ease-in-out;

-moz-transition: all 600ms ease-in-out;

-o-transition: all 600ms ease-in-out;

-ms-transition: all 600ms ease-in-out;

transition: all 600ms ease-in-out;

}

.info-box-sky > .info-content > span.close-sky {

color: #444;

}

.info-box-red span {

position: relative;

bottom: 50px;

right: 10px;

}

2#: Следующий код вставьте после /head:

<script>
$(function() {
$('#expand-green').on('click', function() {
$(this).toggleClass('close-green');
$('.text').toggleClass('open-green').end();
});
});
</script>

$(function() {

$('#expand-green').on('click', function() {

$(this).toggleClass('close-green');

$('.text').toggleClass('open-green').end();

});

</script>

3#: HTML код слайдера:

<ul class="wrapper">
<li>
<div class="info-box-green">
<h4 class="entypo-tools"> Заголовок блока</h4>
<div class="info-content">
<div class="text">
<p>Здесь будет любой ваш контент. Количество этого контента ограничено только вашей фантазией.</p>
</div>
<span class="entypo-plus" id="expand-green">+</span>
</div>
</div>
</li>
</ul>

<li>

<h4 class="entypo-tools"> Заголовок блока</h4>

<p>Здесь будет любой ваш контент. Количество этого контента ограничено только вашей фантазией.</p>

</div>

</div>

</li>

</ul>

Автор публикации

не в сети 4 дня

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: CSS3 Flat jQuery Spoiler Спойлер Стильный

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

6 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии

Участник

kinouser

8 лет назад

Apocalypse привет,а он на куках?

Ответить

Автор

Apocalypse

8 лет назад

Ответить на kinouser

Неа

Ответить

Гость

Анонимно

5 лет назад

Демо не работает

Ответить

Автор

Apocalypse

5 лет назад

Ответить на Анонимно

ДЕМО восстановлено

Ответить

Участник

Александр Петров

5 лет назад

Демо не работает

Ответить

Автор

Apocalypse

5 лет назад

Ответить на Александр Петров

Спасибо, ДЕМО восстановлено

Ответить

topka

Есть скрипт ( денег или баллов ? )
где можно потратить эти баллы или передать и заработать ?

Что-то такое видел на одном сайте ( сталкер сайт на юкозе было)

2024-03-06 21:31:46

Всевидящее око

Новый пост от installusd1 в теме «PPI Pay-Per-Install Best Advertising Network»

2024-03-25 09:45:25

Всевидящее око

Новый комментарий от пользователя паоа: «пкаор» в материале Ajax отправка комментариев в Wordpess без плагинов от Apocalypse

2024-03-27 20:08:09

Apocalypse

Сайт был восстановлен спустя несколько месяцев бездействия

2024-06-27 16:12:56

fapalnaapo

а Шо случилось за что блокировали

2024-06-30 20:46:10

Apocalypse

@fapalnaapo, банально хостинг не был уплачен

2024-07-14 08:27:24

Apocalypse

Всем привет. У кого как жизнь?

2024-07-30 19:50:15

fapalnaapo

давольно таки не плохо, очень приятно, мне очень нравится между прочем

2024-08-13 10:09:49

Apocalypse

Всем доброго дня

2024-11-07 12:00:10

Al-Sher

Всем привет

2024-11-09 17:57:18

......

Для публикации сообщений в чате необходимо авторизоваться

Стильные спойлеры на CSS3 и jQuery

Автор публикации

Apocalypse

Вам может также понравиться...

Посетители сайта

Панель управления

Ноябрь 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

Стильные спойлеры на CSS3 и jQuery

Автор публикации

Apocalypse

Вам может также понравиться...

Анимированная кнопка на CSS3

Листья, летящие при сильном ветре с использованием jQuery

Клик по случайной кнопке на jQuery by Apocalypse

Посетители сайта

Панель управления