Код:
<!--HTML-->
<div class="tabs-up"></div>
<div class="tabs">
<input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
<label for="tab-btn-1">Политика</label>
<input type="radio" name="tab-btn" id="tab-btn-2" value="">
<label for="tab-btn-2">ЗАКОН И ОХРАНА ПОРЯДКА</label>
<input type="radio" name="tab-btn" id="tab-btn-3" value="">
<label for="tab-btn-3">Медицина</label>
<input type="radio" name="tab-btn" id="tab-btn-4" value="">
<label for="tab-btn-4">Образование</label>
<input type="radio" name="tab-btn" id="tab-btn-5" value="">
<label for="tab-btn-5">Культура и развлечения</label>
<input type="radio" name="tab-btn" id="tab-btn-6" value="">
<label for="tab-btn-6">Сфера обслуживания</label>
<input type="radio" name="tab-btn" id="tab-btn-7" value="">
<label for="tab-btn-7">СМИ</label>
<input type="radio" name="tab-btn" id="tab-btn-8" value="">
<label for="tab-btn-8">Криминал</label>
<input type="radio" name="tab-btn" id="tab-btn-9" value="">
<label for="tab-btn-9">Разное</label>
<div id="politics-j">
<li><div class="spoiler-trigger">Исполнительная ветвь</div>
<div class="spoiler-block">
<b>Мэр</b>: человек
<br><b>Заместитель мэра</b>: человек
<br><b>Общественный адвокат</b>: человек
<br><b>Казначей</b>: человек
<br><b>Президенты боро</b>: человек
<br><b>Главы городских департаментов</b>: человек
</div></li>
<li><div class="spoiler-trigger">Законодательная ветвь</div>
<div class="spoiler-block">
► ГОРОДСКОЙ СОВЕТ
<br>
<br><b>Спикер</b>: человек
<br><b>Лидер большинства</b>: человек
<br><b>Лидер меньшинства</b>: человек
<br><b>Члены совета</b>: человек
</div></li>
<li><div class="spoiler-trigger">Судебная ветвь</div>
<div class="spoiler-block">
► ГРАЖДАНСКИЙ СУД
<br>
<br>должность: человек
<br>
<br>► УГОЛОВНЫЙ СУД
<br>
<br>должность: человек
<br>
<br>► СЕМЕЙНЫЙ СУД
<br>
<br>должность: человек
<br>
<br>► ВЕРХОВНЫЙ СУД ШТАТА
<br>
<br>должность: человек
</div></li>
</div>
<div id="legal-order-j">
<li><div class="spoiler-trigger">Полиция [NYPD]</div>
<div class="spoiler-block">
► ОТДЕЛ [участок #...]
<br>
<br>должность - человек
<br>
<br>► ОТДЕЛ [участок #...]
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">ФБР</div>
<div class="spoiler-block">
► ОТДЕЛ
<br>
<br>должность - человек
<br>
<br>► ОТДЕЛ
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Прокуратура</div>
<div class="spoiler-block">
► ОТДЕЛ
<br>
<br>должность - человек
<br>
<br>► ОТДЕЛ
<br>
<br>должность - человек
</div></li>
</div>
<div id="medicine-j">
<li><div class="spoiler-trigger">Пресвитерианский госпиталь</div>
<div class="spoiler-block">
► КАРДИОХИРУРГИЯ
<br>
<br>должность - человек
<br>
<br>► НЕЙРОХИРУРГИЯ
<br>
<br>должность - человек
<br>
<br>► ОБЩАЯ ХИРУРГИЯ
<br>
<br>должность - человек
<br>
<br>► ТРАВМАТОЛОГИЧЕСКОЕ ОТДЕЛЕНИЕ
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Медицинский центр Лангон</div>
<div class="spoiler-block">
► КАРДИОХИРУРГИЯ
<br>
<br>должность - человек
<br>
<br>► НЕЙРОХИРУРГИЯ
<br>
<br>должность - человек
<br>
<br>► ОБЩАЯ ХИРУРГИЯ
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Маунт-Синай</div>
<div class="spoiler-block">
► КАРДИОХИРУРГИЯ
<br>
<br>должность - человек
<br>
<br>► НЕЙРОХИРУРГИЯ
<br>
<br>должность - человек
<br>
<br>► ОБЩАЯ ХИРУРГИЯ
<br>
<br>должность - человек
<br>
<br>► ТРАВМАТОЛОГИЧЕСКОЕ ОТДЕЛЕНИЕ
<br>
<br>должность - человек
</div></li>
</div>
<div id="education-j">
<li><div class="spoiler-trigger">Средняя школа</div>
<div class="spoiler-block">
► НАЗВАНИЕ ШКОЛЫ
<br>
<br>человек
</div></li>
<li><div class="spoiler-trigger">Старшая школа</div>
<div class="spoiler-block">
► НАЗВАНИЕ ШКОЛЫ
<br>
<br>человек
</div></li>
<li><div class="spoiler-trigger">Колумбийский университет</div>
<div class="spoiler-block">
► НАЗВАНИЕ ФАКУЛЬТЕТА
<br>
<br>человек
</div></li>
<li><div class="spoiler-trigger">Нью-Йоркский университет</div>
<div class="spoiler-block">
► НАЗВАНИЕ ФАКУЛЬТЕТА
<br>
<br>человек
</div></li>
</div>
<div id="media-j">
<li><div class="spoiler-trigger">Кинотеатры</div>
<div class="spoiler-block">
► Regal E-Walk 4DX & RPX
<br>
<br>должность - человек
<br>
<br>► Cinema Village
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Бродвейские театры</div>
<div class="spoiler-block">
► НАЗВАНИЕ ТЕАТРА
<br>
<br>должность - человек
<br>
<br>► НАЗВАНИЕ ТЕАТРА
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Музеи</div>
<div class="spoiler-block">
► МЕТРОПОЛИТЕН-МУЗЕЙ
<br>
<br>должность - человек
<br>
<br>► БРУКЛИНСКИЙ МУЗЕЙ
<br>
<br>должность - человек
<br>
<br>► МУЗЕЙ ЕСТЕСТВЕННОЙ ИСТОРИИ
<br>
<br>должность - человек
<br>
<br>► МУЗЕЙ СОВРЕМЕННОГО ИСКУССТВА
<br>
<br>должность - человек
</div></li>
</div>
<div id="services-sector-j">
<li><div class="spoiler-trigger">Рестораны</div>
<div class="spoiler-block">
► НАЗВАНИЕ РЕСТОРАНА
<br>
<br>должность - человек
<br>
<br>► НАЗВАНИЕ РЕСТОРАНА
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Кафе</div>
<div class="spoiler-block">
► НАЗВАНИЕ КАФЕ
<br>
<br>должность - человек
<br>
<br>► НАЗВАНИЕ КАФЕ
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Клубы</div>
<div class="spoiler-block">
► НАЗВАНИЕ КЛУБА
<br>
<br>должность - человек
<br>
<br>► НАЗВАНИЕ КЛУБА
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Бары</div>
<div class="spoiler-block">
► НАЗВАНИЕ БАРА
<br>
<br>должность - человек
<br>
<br>► НАЗВАНИЕ БАРА
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Пабы</div>
<div class="spoiler-block">
► НАЗВАНИЕ ПАБА
<br>
<br>должность - человек
<br>
<br>► НАЗВАНИЕ ПАБА
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Шаверма</div>
<div class="spoiler-block">
► THE HUMMUS & PITA CO.
<br>
<br>должность - человек
</div></li>
</div>
<div id="mass-media-j">
<li><div class="spoiler-trigger" title="[деловая, финансовая; ежедневная]">The Wall Street Journal</div>
<div class="spoiler-block">
► ОТДЕЛ
<br>
<br>должность - человек
<br>
<br>► ОТДЕЛ
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger" title="[многопрофильная; ежедневная]">The New York Times</div>
<div class="spoiler-block">
► НОВОСТИ
<br>
<br><b>репортер</b>: <a href="http://timess.rusff.me/profile.php?id=4">Camilla Miller</a>
<br>должность - человек
<br>
<br>► ОТДЕЛ
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger" title="[новости, криминал; ежедневная]">New York Daily News</div>
<div class="spoiler-block">
► ОТДЕЛ
<br>
<br>должность - человек
<br>
<br>► ОТДЕЛ
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger" title="[новости]">Fox News Channel</div>
<div class="spoiler-block">
► ОТДЕЛ
<br>
<br>должность - человек
<br>
<br>► ОТДЕЛ
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger" title="[новости]">CNN</div>
<div class="spoiler-block">
► ОТДЕЛ
<br>
<br>должность - человек
<br>
<br>► ОТДЕЛ
<br>
<br>должность - человек
</div></li>
</div>
<div id="crime-j">
<li><div class="spoiler-trigger">Подпольное казино</div>
<div class="spoiler-block">
► НАЗВАНИЕ КАЗИНО
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Эскорт-клуб</div>
<div class="spoiler-block">
► НАЗВАНИЕ КЛУБА
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Бойцовские клубы</div>
<div class="spoiler-block">
► НАЗВАНИЕ КЛУБА
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Мошенники, аферисты etc</div>
<div class="spoiler-block">
должность - человек
</div></li>
</div>
<div id="other-j">
...
</div>
</div>
<strong class="legend"><a href="javascript://" style="color: #eeece5" onclick="select_text($(this).parent().next().find('pre').get(0));return!1"><button class="jobs-box" title="нажми сюда чтобы скопировать код">ЗАНЯТЬ ВАКАНСИЮ</button></a></strong><div class="blockcode"><div class="scrollbox-2" style="height: 4.5em; color: #717f61;"><pre style="font-size: 0px;"><br><b>Должность</b>: <a href="ссылка на профиль">Имя персонажа</a></pre></div></div></div>
<style>
.tabs-up {
width: 600px;
height: 105px;
background-image: url(https://i.imgur.com/GmRPb4P.png);
background-size: 100%;
background-repeat: no-repeat;
top: -10px;
left: 50px;
position: relative;
}
.tabs {
font-size: 0;
width: 600px;
margin-left: auto;
margin-right: auto;
height: 430px;
background: #d9d6cd;
z-index: 10;
outline: 5px solid #839470;
outline-offset: -5px;
margin-bottom: -75px;
margin-top: -25px;
}
.tabs>input[type="radio"] {
display: none;
}
.tabs>div {
/* скрыть контент по умолчанию */
display: none;
padding: 10px 15px;
font-size: 16px;
}
/* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */
#tab-btn-1:checked~#politics-j,
#tab-btn-2:checked~#legal-order-j,
#tab-btn-3:checked~#medicine-j,
#tab-btn-4:checked~#education-j,
#tab-btn-5:checked~#media-j,
#tab-btn-6:checked~#services-sector-j,
#tab-btn-7:checked~#mass-media-j,
#tab-btn-8:checked~#crime-j,
#tab-btn-9:checked~#other-j {
display: block;
}
.tabs>label {
padding: 8px;
margin: 10px 0 0 10px;
text-align: left;
user-select: none;
font-size: 12px;
font-family: Roboto Condensed;
color: #e2dfd7;
background-color: #829370;
text-transform: uppercase;
line-height: 1.5;
text-shadow: 1px 0px 0 #758563;
font-weight: bold;
letter-spacing: 0.2ex;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
cursor: pointer;
width: 185px;
display: flex;
flex-flow: column;
top: 15px;
left: -10px;
position: relative;
outline: 3px solid #829370;
outline-offset: -3px;
}
.tabs>label:not(:first-of-type) {
border-left: none;
}
.tabs>input[type="radio"]:checked+label {
border-bottom: ;
}
#politics-j {
left: 250px;
top: -360px;
position: relative;
width: 300px;
height: 290px;
overflow: auto;
}
#legal-order-j {
left: 250px;
top: -360px;
position: relative;
width: 300px;
height: 290px;
overflow: auto;
}
#medicine-j {
left: 250px;
top: -360px;
position: relative;
width: 300px;
height: 290px;
overflow: auto;
}
#education-j {
left: 250px;
top: -360px;
position: relative;
width: 300px;
height: 290px;
overflow: auto;
}
#media-j {
left: 250px;
top: -360px;
position: relative;
width: 300px;
height: 290px;
overflow: auto;
}
#services-sector-j {
left: 250px;
top: -360px;
position: relative;
width: 300px;
height: 290px;
overflow: auto;
}
#mass-media-j {
left: 250px;
top: -360px;
position: relative;
width: 300px;
height: 290px;
overflow: auto;
}
#crime-j {
left: 250px;
top: -360px;
position: relative;
width: 300px;
height: 290px;
overflow: auto;
}
#other-j {
left: 250px;
top: -360px;
position: relative;
width: 300px;
height: 290px;
overflow: auto;
}
.jobs-box {
width: 250px;
height: 60px;
background-image: url(https://i.imgur.com/Vq1fVoV.png);
background-size: 100%;
background-repeat: no-repeat;
position: relative;
font-size: 12px;
font-family: Franklin Gothic Medium;
padding-top: 33px;
padding-left: 50px;
left: 330px;
letter-spacing: 1px;
top: -20px;
text-align: center;
text-shadow: 1px 1px 0 #cdb840;
border: none; outline: none;
background-color: transparent;
cursor: pointer;
color: #e9e7e2;
}
.spoiler-trigger{
width: 290px;
background-color: #829370;
padding: 8px;
font-size: 12px;
font-family: tahoma;
font-weight: bold;
color: #e9e7e2;
display: flex;
flex-flow: column;
margin: 20px 0 20px 0;
top: -30px;
cursor: pointer;
position: relative;
background-image: url(https://i.imgur.com/2D3pxRr.png);
background-size: 100%;
background-repeat: no-repeat;
}
.spoiler-trigger.active{
background-image: url(https://i.imgur.com/WIE37SG.png);
background-size: 100%;
background-repeat: no-repeat;
width: 290px;
}
.spoiler-trigger:hover>span{
border-bottom-style: solid;
}
.spoiler-block{
display: none;
position: relative;
top: -35px;
left: 5px;
font-size: 11px!important;
font-family: tahoma;
color: #3d4733;
letter-spacing: 0.1ex;
line-height: 150%;
}
</style>
<script>$(document).on('click','.spoiler-trigger',function(e){e.preventDefault();$(this).toggleClass('active');$(this).parent().find('.spoiler-block').first().slideToggle(300);})
</script>
