Код:
<!--HTML-->
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap" rel="stylesheet">
<div id="jobs-main">
<span class="jobs-rules-1">ПОЖАЛУЙСТА, УКАЗЫВАЙТЕ место работы персонажа</span><br>
<span class="jobs-rules-2">чтобы добавить своё место работы, укажите название заведения</span>
<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><b>детективы</b>: <a href="http://timess.rusff.me/profile.php?id=7"> Ray Halstead,</a> <a href="http://timess.rusff.me/profile.php?id=54">Mary Barrett</a><br>
<b>информатор</b>: <a href="http://timess.rusff.me/profile.php?id=71">Ari Miller</a><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><b>частный детектив</b>: <a href="http://timess.rusff.me/profile.php?id=20">Benoit Blanc</a>
<br>
<br>► Детективное агентство «Bloodhound»
<br><b>владелец, детектив</b>: <a href="http://timess.rusff.me/profile.php?id=68">Damian Dijkstra</a>
<br>
<br>► Детективное агентство «Sharp Investigation»
<br><b>владелица, детектив</b>: <a href="http://timess.rusff.me/profile.php?id=82">Caitlin Sharp</a>
</div></li>
</div>
<div id="medicine-j">
<li><div class="spoiler-trigger">Пресвитерианский госпиталь</div>
<div class="spoiler-block">
► КАРДИОХИРУРГИЯ
<br>
<br><b>ординатор</b>: <a href="http://timess.rusff.me/profile.php?id=46">Lily Samuel</a><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>
<b>хирург-трансплантолог</b>: <a href="http://timess.rusff.me/profile.php?id=73">Cain Lynch</a><br>
<br>
<br>► ТРАВМАТОЛОГИЧЕСКОЕ ОТДЕЛЕНИЕ
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Пожарный департамент Нью-Йорка</div>
<div class="spoiler-block">
<br>► ПОЖАРНАЯ ЧАСТЬ #...
<br>
<br><b>лейтенант пожарного расчета</b>: <a href="https://timess.rusff.me/profile.php?id=47">Owen Severide</a><br>
<br>должность - человек
</div></li>
</div>
<div id="education-j">
<li><div class="spoiler-trigger">Средняя школа</div>
<div class="spoiler-block">
<b>ученик</b>: <a href="http://timess.rusff.me/profile.php?id=24">Erik Heller</a>
</div></li>
<li><div class="spoiler-trigger">Старшая школа</div>
<div class="spoiler-block">
<b>ученики</b>: <a href="http://timess.rusff.me/profile.php?id=71">Ari Miller</a>, <a href="http://timess.rusff.me/viewtopic.php?id=215">Duncan Baudelaire</a>, <a href="http://timess.rusff.me/profile.php?id=76">Veta Weinberg</a><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><b>преподаватель</b>: <a href="http://timess.rusff.me/profile.php?id=49">Hugo Zapf</a>
<br>
<br>
► ФАКУЛЬТЕТ ГУМАНИТАРНЫХ НАУК
<br>
<br><b>студентка</b>: <a href="http://timess.rusff.me/viewtopic.php?id=124#p5012">Lipa Apala</a><br>
<br>
► ФАКУЛЬТЕТ ЖУРНАЛИСТИКИ
<br><b>студентка</b>: <a href="http://timess.rusff.me/profile.php?id=74">Ruby Matthews</a><br>
<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">
<b>актёр</b>: <a href="http://timess.rusff.me/profile.php?id=13">Milos Jovic</a>
<br><b>актёр театра; снимается в эпизодических ролях и в массовке</b>: <a href="http://timess.rusff.me/profile.php?id=31">Richard Black</a>
<br>
</div></li>
<li><div class="spoiler-trigger">Кабаре</div>
<div class="spoiler-block">
<br><br>► «The Blue Angel»
<br><b>танцовщица</b>: <a href="http://timess.rusff.me/viewtopic.php?id=151">Rocky Jones</a><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><b>куратор выставок в музее современного искусства</b>: <a href="http://timess.rusff.me/profile.php?id=42">Anthea Fleetwood</a><br>
</div></li>
</div>
<div id="services-sector-j">
<li><div class="spoiler-trigger">Отели</div>
<div class="spoiler-block">
<br>► НАЗВАНИЕ ОТЕЛЯ
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Тату-салоны</div>
<div class="spoiler-block">
<br>► НАЗВАНИЕ САЛОНА
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Рестораны</div>
<div class="spoiler-block">
► «CASA RIVAS»
<br>
<br><b>менеджер</b>: <a href="http://timess.rusff.me/profile.php?id=52">Teresa Franco</a><br>
<b>повар</b>: <a href="http://timess.rusff.me/profile.php?id=51">Charles Sutton</a><br>
<br>
<br>► НАЗВАНИЕ РЕСТОРАНА
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Клубы</div>
<div class="spoiler-block">
► THREE WHISHES
<br>
<br><b>директор ночного клуба «Three Whishes»</b>: <a href="http://timess.rusff.me/profile.php?id=43">Theodore Dickens</a><br>
<br>► GUILTY PLEASURE (NIGHT CLUB/BDSM CLUB)<br><br>
<b>владелица</b>: <a href="http://timess.rusff.me/profile.php?id=72">Juliette Fletcher</a><br>
<br>► НАЗВАНИЕ КЛУБА
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Бары</div>
<div class="spoiler-block">
► «Jeremy's Ale House»
<br>
<br><b>бармен</b>: <a href="http://timess.rusff.me/profile.php?id=45">Ernest Lang</a><br>
<br>
<br>► НАЗВАНИЕ БАРА
<br>
<br>должность - человек
</div></li>
<li><div class="spoiler-trigger">Пабы</div>
<div class="spoiler-block">
► «Bootlegger»
<br>
<b>Владелец/бармен</b>: <a href="http://timess.rusff.me/profile.php?id=63">Shawn Carter-Williams</a><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><b>редактор, репортер</b>: <a href="http://timess.rusff.me/profile.php?id=16">Addison Bennet</a>
</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>
<li><div class="spoiler-trigger">Разное</div>
<div class="spoiler-block">
<b>выпускающий редактор (издатель) в Farrar, Straus & Giroux</b>: <a href="http://timess.rusff.me/profile.php?id=60">Jane Cooper</a><br>
<b>автор автомобильной рубрики информационного интернет-проекта</b>: <a href="http://timess.rusff.me/profile.php?id=70">Evvie Atwood</a><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">
<br><b>карманница</b>: <a href="http://timess.rusff.me/profile.php?id=12">Christine Crain</a>
<br><b>вор, мелкий наркокурьер</b>: <a href="http://timess.rusff.me/profile.php?id=24">Erik Heller</a><br>
<b>хакер</b>: <a href="http://timess.rusff.me/profile.php?id=2">Jade Atwood</a>, <a href="http://timess.rusff.me/profile.php?id=36">Adrian Chase</a><br>
<b>угонщик, стритрейсер</b>: <a href="http://timess.rusff.me/profile.php?id=71">Ari Miller</a><br>
</div></li>
</div>
<div id="other-j">
► ЧАСТНЫЙ ПРЕДПРИНИМАТЕЛЬ
<br>
<br><b>психолог, инструктор по йоге, волонтер</b>: <a href="http://timess.rusff.me/profile.php?id=41">Natalie Austin</a><br>
<br>
► ИСКУССТВО
<br><br>
<b>художник</b>: <a href="http://timess.rusff.me/profile.php?id=53">Lenny Castaneda</a><br>
<br>
</div>
</div>
<strong class="legend"><a href="javascript://" onclick="select_text($(this).parent().next().find('pre').get(0));return!1"><button class="face-code-jobs">занять вакансию</button></a></strong><div style="font-size: 0px"><pre><b>должность</b>: <a href="ссылка на профиль">Имя персонажа</a><br></pre></div>
</div>
<style>
#jobs-main {
background: url(https://i.imgur.com/NEvaJGJ.png);
width: 840px;
height: 473px;
background-size: 100%;
margin-top: -10px;
}
.jobs-rules-1 {
position: relative;
left: 460px;
top: 40px;
font-family: "Roboto Condensed";
color: rgb(255 227 208);
text-transform: uppercase;
line-height: 0.6;
font-size: 12px;
}
.jobs-rules-2 {
position: relative;
left: 450px;
top: 45px;
font-family: Roboto Condensed;
font-size: 11px;
color: rgb(255 227 208);
}
.tabs>input[type="radio"] {
display: none;
}
.tabs>div {
display: none;
padding: 10px 15px;
font-size: 16px;
}
#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: 5px 0 0 -8px;
text-align: left;
user-select: none;
font-size: 11px;
font-family: Roboto Condensed;
color: #ffffff;
background-color: #df815d7a;
text-transform: uppercase;
line-height: 1.5;
font-weight: bold;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
cursor: pointer;
top: 65px;
left: 43px;
position: relative;
display: flex;
width: 200px;
box-shadow: inset 0 0 0px 2px #d98c4a;
}
.tabs>label:not(:first-of-type) {
}
.tabs>input[type="radio"]:checked+label {
}
.spoiler-trigger::before {
content: url(https://i.imgur.com/vlqLwTr.png);
padding-right: 10px;
margin-left: 3px;
}
#politics-j {
left: 290px;
top: -260px;
position: relative;
width: 490px;
height: 290px;
overflow: auto;
font-size: 10px;
}
#legal-order-j {
left: 290px;
top: -260px;
position: relative;
width: 490px;
height: 290px;
overflow: auto;
font-size: 10px;
}
#medicine-j {
left: 290px;
top: -260px;
position: relative;
width: 490px;
height: 290px;
overflow: auto;
font-size: 10px;
}
#education-j {
left: 290px;
top: -260px;
position: relative;
width: 490px;
height: 290px;
overflow: auto;
font-size: 10px;
}
#media-j {
left: 290px;
top: -260px;
position: relative;
width: 490px;
height: 290px;
overflow: auto;
font-size: 10px;
}
#services-sector-j {
left: 290px;
top: -260px;
position: relative;
width: 490px;
height: 290px;
overflow: auto;
font-size: 10px;
}
#mass-media-j {
left: 290px;
top: -260px;
position: relative;
width: 490px;
height: 290px;
overflow: auto;
font-size: 10px;
}
#crime-j {
left: 290px;
top: -260px;
position: relative;
width: 490px;
height: 290px;
overflow: auto;
font-size: 10px;
}
#other-j {
left: 290px;
top: -260px;
position: relative;
width: 490px;
height: 290px;
overflow: auto;
font-size: 10px;
}
.spoiler-trigger{
width: 400px;
padding: 8px;
font-size: 12px;
font-family: tahoma;
font-weight: bold;
color: #f3f3f3;
display: flex;
margin: 20px 0 20px 0;
top: -30px;
cursor: pointer;
position: relative;
background: #da8155;
}
.spoiler-trigger.active{
width: 400px;
cursor: pointer;
background: #dfa183;
}
.spoiler-trigger.active::before {
content: url(https://i.imgur.com/LJHdvTo.png);
padding-right: 10px;
margin-left: 3px;
}
.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: #8f5e3c;
letter-spacing: 0.1ex;
line-height: 150%;
}
.face-code-jobs {
width: 150px;
width: 150px;
position: absolute;
margin-left: 305px;
margin-top: -270px;
background-color: #da8155;
color: #f3f3f3!important;
text-transform: uppercase;
padding: 6px 15px 5px 15px;
font-size: 11px;
border: none;
outline: none;
font-weight: bold;
cursor: pointer;
}
.face-code-jobs:hover {
background-color: #657163;
}
</style>
<script>$(document).on('click','.spoiler-trigger',function(e){e.preventDefault();$(this).toggleClass('active');$(this).parent().find('.spoiler-block').first().slideToggle(300);})
</script>
