Код:
<!--HTML-->
<div id="htmk_wrap" class="html-bank">
<div class="sp_button i_active">общий раздел <i class="select_mark"></i></div>
<div class="sp_content-wrap" style="display: block;">
<div class="sp_content-inner">
<ul class="bank_list">
<li>
<span class="bank_service">Фон профиля <i class="tooltip_mark"><span class="tooltip_text">За дополнительной информацией смотри раздел с хэдерами.</span></i></span>
<span class="bank_cost">3 поста / 60 флудовых сообщений</span>
</li>
<li>
<span class="bank_service">Плашка <i class="tooltip_mark"><span class="tooltip_text">Оформляется в 2 строчки; рекомендуемое максимальное количество символов в каждой строке: <b>33</b><br>
Вместе с текстом можно изменить цвет градиента: для этого вместе с текстом на отдельной строчке укажите <b>hex</b> желаемого цвета.<br>
В плашки можно добавить картинки: смотри раздел "Картинки в плашки", чтобы узнать детали!</span></i></span>
<span class="bank_cost">1 пост / 20 флудовых сообщений</span>
</li>
<li>
<span class="bank_service">Картинка в плашку <i class="tooltip_mark"><span class="tooltip_text">Смотри раздел "Картинки в плашки", чтобы узнать детали!</span></i></span>
<span class="bank_cost">1 пост / 20 флудовых сообщений</span>
</li>
<li>
<span class="bank_service">Гиф-смайл с выбранной внешностью <i class="tooltip_mark"><span class="tooltip_text">Можете дать нам желаемый исходник, а можем попробовать вас удивить.</span></i></span>
<span class="bank_cost">30 флудовых сообщений</span>
</li>
<li>
<span class="bank_service">Набор из 3 гиф-смайлов с выбранной внешностью <i class="tooltip_mark"><span class="tooltip_text">Можете дать нам желаемые исходники, а можем попробовать вас удивить.</span></i></span>
<span class="bank_cost">60 флудовых сообщений</span>
</li>
<li>
<span class="bank_service">Завести твинка </span>
<span class="bank_cost">3 поста</span>
</li>
<li>
<span class="bank_service">Листовка с нужным персонажем </span>
<span class="bank_cost">5 постов / 100 флудовых сообщений</span>
</li>
<li>
<span class="bank_service">Нужный в шапке на 3 недели </span>
<span class="bank_cost">4 постов / 80 флудовых сообщений</span>
</li>
<li>
<span class="bank_service">Реклама нужного в подписи пиар-аккаунта </span>
<span class="bank_cost">3 поста / 60 флудовых сообщений</span>
</li>
</ul>
</div>
</div>
<div class="sp_button">ФОНЫ ПРОФИЛЯ <i class="select_mark"></i></div>
<div class="sp_content-wrap">
<div class="sp_content-inner">
<div class="sp_content-desc">
<span class="bank_cost2">3 поста / 60 флудовых сообщений</span>
<span class="bank_service-desc">
Хэдеры из этой секции не эксклюзивны и могут повторяться. Можно заказать свой хэдер, который будет только вашим.
</span>
<span class="bank_service-desc"><b class="special_b">✱</b> Размер <b>224х305px</b> (можно больше), кидайте прямой ссылкой вместе с заявкой;<br>
<b class="special_b">✱</b> Если заказываете свой, обращайте внимание на то, чтобы изображение не было излишне светлым - текст статуса белый, и на слишком светлом фоне может потеряться;<br>
<b class="special_b">✱</b> Всегда можно попросить кого-нибудь из амс подредактировать как нужно, не стесняйтесь!
</span>
<span class="bank_service-desc">
<b class="special_b">Во избежание киберпсихоза не принимаются:</b> nsfl/lewd контент и gif-изображения.
</span>
</div>
<ul class="bank_list services_preview headers">
<li>
<span class="services_preview-title">01 - LENS FLARE</span>
<img src="https://i.imgur.com/AC3xLZa.png">
</li>
<li>
<span class="services_preview-title">02 - SKYLINE</span>
<img src="https://i.imgur.com/D2V1buj.png">
</li>
<li>
<span class="services_preview-title">03 - CITY LIGHTS</span>
<img src="https://i.imgur.com/go9qI4f.png">
</li>
<li>
<span class="services_preview-title">04 - CLUBBIN</span>
<img src="https://i.imgur.com/grxzFJL.png">
</li>
<li>
<span class="services_preview-title">05 - GRAFFITI</span>
<img src="https://i.imgur.com/pclbyhO.png">
</li>
<li>
<span class="services_preview-title">06 - AURORA</span>
<img src="https://i.imgur.com/liVTmSP.png">
</li>
<li>
<span class="services_preview-title">07 - GLITCH</span>
<img src="https://i.imgur.com/nU9rSAd.png">
</li>
<li>
<span class="services_preview-title">08 - MEGABUILDING</span>
<img src="https://i.imgur.com/XP577bW.png">
</li>
<li>
<span class="services_preview-title">09 - GASOLINE</span>
<img src="https://i.imgur.com/VuwSYlW.png">
</li>
</ul>
</div>
</div>
<div class="sp_button">КАРТИНКИ В ПЛАШКИ <i class="select_mark"></i></div>
<div class="sp_content-wrap">
<div class="sp_content-inner">
<div class="sp_content-desc">
<span class="bank_cost2">1 пост / 20 флудовых сообщений</span>
<span class="bank_service-desc">
Изображения из этой секции не эксклюзивны и могут повторяться. Можно заказать свой хэдер, который будет только вашим.
</span>
<span class="bank_service-desc"><b class="special_b">✱</b> Размер <b>224х41px</b> (можно больше - всё порежем), кидайте прямой ссылкой вместе с заявкой;<br>
<b class="special_b">✱</b> Если заказываете свой, обращайте внимание на то, чтобы изображение не было излишне светлым - текст плашки белый, и на слишком светлом фоне может потеряться;<br>
<b class="special_b">✱</b> Всегда можно попросить кого-нибудь из амс подредактировать как нужно, не стесняйтесь!
</span>
<span class="bank_service-desc">
<b class="special_b">Во избежание киберпсихоза не принимаются:</b> nsfw/lewd content и гифки, способные вызвать эпилептический припадок.
</span>
</div>
<ul class="bank_list services_preview colletions_preview">
<li>
<span class="services_preview-title">01 - SPACE</span>
<img src="https://i.imgur.com/NPBtJyr.gif">
</li>
<li>
<span class="services_preview-title">02 - GLITCH</span>
<img src="https://i.imgur.com/24m6X4W.gif">
</li>
<li>
<span class="services_preview-title">03 - CRASH</span>
<img src="https://i.imgur.com/wyAIAQd.gif">
</li>
<li>
<span class="services_preview-title">04 - CHROMATIC</span>
<img src="https://i.imgur.com/h3hrbSu.gif">
</li>
<li>
<span class="services_preview-title">05 - ELETAPE</span>
<img src="https://i.imgur.com/fgeuN30.gif">
</li>
<li>
<span class="services_preview-title">06 - NEUROPLASTICITY</span>
<img src="https://i.imgur.com/Gt0iF17.gif">
</li>
<li>
<span class="services_preview-title">07 - TINDERS</span>
<img src="https://i.imgur.com/JyEcKZh.gif">
</li>
<li>
<span class="services_preview-title">08 - HELLFIRE</span>
<img src="https://i.imgur.com/AQriuZP.gif">
</li>
</ul>
</div>
</div>
<div class="sp_button">Коллекции <i class="select_mark"></i></div>
<div class="sp_content-wrap">
<div class="sp_content-inner">
<div class="sp_content-desc">
<span class="bank_service-desc">
<b class="special_b">Просто наведите курсор на изображение, чтобы узнать условия приобретения уникального оружия. </b>
</span>
<span class="bank_service-desc">
Коллекция #1: <b class="special_b">Витрина Ви</b> - святилище стали и хрома для истинных ценителей Найт-Сити!
</span>
<span class="bank_service-desc">
Эта коллекция воплощает дух оружейного тайника Ви, легендарной наемницы, чья судьба переплелась с судьбой города будущего. В этой витрине вы найдёте культовое оружие, при помощи которого Ви и другие легенды прокладывали свой путь через враждебный мир Найт-Сити.
</span>
</div>
<ul class="bank_list services_preview colletions_preview">
<li>
<span class="services_preview-title">МАЛОРИАН АРМС 3516</span>
<img src="https://i.imgur.com/zqwBywt.png">
<span class="services_preview-desc">
<i>Сделан на заказ для Джонни Сильверхенда. Настоящий образец вкуса.</i><br>
<b>Условие:</b> используйте упоминание группы Samurai в посте
</span>
</li>
<li>
<span class="services_preview-title">ГОРДОСТЬ</span>
<img src="https://i.imgur.com/fHWQIEL.png">
<span class="services_preview-desc">
<i>Всем пистолетам пистолет.</i><br>
<b>Условие:</b> расскажи в теме рецепт идеального коктейля персонажа
</span>
</li>
<li>
<span class="services_preview-title">АРХАНГЕЛ</span>
<img src="https://i.imgur.com/2cK7udj.png">
<span class="services_preview-desc">
<i>Шедевр, который не должен пылиться за стеклом.</i><br>
<b>Условие:</b> составь в теме плейлист своего персонажа от 5 треков
</span>
</li>
<li>
<span class="services_preview-title">КРЭШ</span>
<img src="https://i.imgur.com/elBl5UB.png">
<span class="services_preview-desc">
<i>Оружие для тех, кто не промахивается.</i><br>
<b>Условие:</b> расскажи в теме о 3 принципах персонажа
</span>
</li>
<li>
<span class="services_preview-title">НАДЗОР</span>
<img src="https://i.imgur.com/fdV56hx.png">
<span class="services_preview-desc">
<i>Снайперская винтовка, принадлежавшая Панам. Быстро перезаряжается, точно стреляет.</i><br>
<b>Условие:</b> расскажи в теме о самом незабываемом воспоминании персонажа, которым он мог бы поделиться у костра
</span>
</li>
<li>
<span class="services_preview-title">ЛИЗЗИ</span>
<img src="https://i.imgur.com/CdlP80P.png">
<span class="services_preview-desc">
<i>Внешне напоминает игрушку, но стреляет как настоящий.</i><br>
<b>Условие:</b> принеси эстетику вашего персонажа в тему
</span>
</li>
<li>
<span class="services_preview-title">ЗВЕЗДА ДУМ-ДУМА</span>
<img src="https://i.imgur.com/vbVK6tB.png">
<span class="services_preview-desc">
<i>Превратит в бесформенную груду мяса кого угодно. Внимание: после использования требуется уборка.</i><br>
<b>Условие:</b> расскажи в теме о самой первой кибернетической модификации персонажа
</span>
</li>
<li>
<span class="services_preview-title">ВСТАНИСЛАВ ШИШКИН</span>
<img src="https://i.imgur.com/6Z6UXQV.png">
<span class="services_preview-desc">
<i>Не убивает, но калечит до неузнаваемости.</i><br>
<b>Условие:</b> упомяни в посте тему любви и близости
</span>
</li>
</ul>
<div class="sp_content-desc">
<span class="bank_service-desc">
Коллекция #2: <b class="special_b">[coming soon]</b></span>
</div>
<ul class="bank_list services_preview colletions_preview">
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
<span class="services_preview-desc">
<b>Условие:</b> снимать штаны и бегать<br>
</span>
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
<span class="services_preview-desc">
<b>Условие:</b> снимать штаны и бегать
</span>
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
<span class="services_preview-desc">
<b>Условие:</b> снимать штаны и бегать
</span>
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
<span class="services_preview-desc">
<b>Условие:</b> снимать штаны и бегать
</span>
</li>
</ul>
</div>
</div>
<div class="sp_button">Специальные коллекции к ивентам <i class="select_mark"></i></div>
<div class="sp_content-wrap">
<div class="sp_content-inner">
<div class="sp_content-desc">
<span class="bank_service-desc">
<b class="special_b">Просто наведите курсор на изображение, чтобы узнать условия приобретения уникального предмета коллеции. </b>
</span>
<span class="bank_service-desc">
Коллекция #1: <b class="special_b">SUMMER HEAT</b> - жаркие дни, захватывающие ночи, летний драйв и капелька отпуска! Эксклюзивная награда за выполнение заданий в летнем ивенте.</span>
</div>
<ul class="bank_list services_preview headers">
<li>
<span class="services_preview-title">01 - VAPOR</span>
<img src="https://i.imgur.com/t2ULXxR.png">
<span class="services_preview-desc">
<b>Условие:</b> Принеси ссылку на выполненное задание GAME TIME // А ЧТО У НАС ТАМ В СЛОВАРЕ?<br>
</span>
</li>
<li>
<span class="services_preview-title">02 - WAVES</span>
<img src="https://i.imgur.com/lFzI9pe.png">
<span class="services_preview-desc">
<b>Условие:</b> Принеси ссылку на выполненное задание GAME TIME // НА РАДИО ВОЛНАХ
</span>
</li>
<li>
<span class="services_preview-title">03 - FERRIS</span>
<img src="https://i.imgur.com/0v0h6xM.png">
<span class="services_preview-desc">
<b>Условие:</b>Принеси ссылку на выполненное задание GAME TIME // СОБЕРИ СОЙКУ
</span>
</li>
</ul>
<ul class="bank_list services_preview colletions_preview">
<li>
<span class="services_preview-title">01 - VAPOR</span>
<img src="https://i.imgur.com/XqCFywb.gif">
<span class="services_preview-desc">
<b>Условие:</b> Принеси ссылку на выполненное задание GAME TIME // А ЧТО У НАС ТАМ В СЛОВАРЕ?
</span>
</li>
<li>
<span class="services_preview-title">02 - WAVES</span>
<img src="https://i.imgur.com/gr2LfGe.gif">
<span class="services_preview-desc">
<b>Условие:</b> Принеси ссылку на выполненное задание GAME TIME // НА РАДИО ВОЛНАХ
</span>
</li>
<li>
<span class="services_preview-title">03 - FERRIS</span>
<img src="https://i.imgur.com/3X9HiyD.gif">
<span class="services_preview-desc">
<b>Условие:</b>Принеси ссылку на выполненное задание GAME TIME // СОБЕРИ СОЙКУ
</span>
</li>
</ul>
</div>
</div>
<div class="sp_button">Ачивки <i class="select_mark"></i></div>
<div class="sp_content-wrap">
<div class="sp_content-inner">
<div class="sp_content-desc">
<span class="bank_service-desc">
Очень скоро здесь появятся комплекты достижений, которые можно получить за выполнение специальных заданий.
</span>
<span class="bank_service-desc">
<b class="special_b">[work in progress]</b>
</span>
</div>
<ul class="bank_list services_preview colletions_preview">
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
<span class="services_preview-desc">
<b>Условие:</b> снимать штаны и бегать<br>
</span>
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
<span class="services_preview-desc">
<b>Условие:</b> снимать штаны и бегать
</span>
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
<span class="services_preview-desc">
<b>Условие:</b> снимать штаны и бегать
</span>
</li>
<li>
<span class="services_preview-title">404</span>
<img src="https://forumupload.ru/uploads/001c/1a/06/2/13242.png">
<span class="services_preview-desc">
<b>Условие:</b> снимать штаны и бегать
</span>
</li>
</ul>
</div>
</div>
</div>
<script>
$('.sp_button').click(function() {
$('.sp_button').not(this).removeClass('i_active');
$(this).toggleClass('i_active');
});
$('.sp_button').each(function() {
$(this).on('click', function() { $('.sp_button').not($(this)).next().slideUp();
$(this).next().slideToggle();
});
});
</script>
