playful2017,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.vacancy-title {
text-align: center; }
.vacancy-title h2 {
font-family: "Roboto", normal;
font-size: 40px; }
.VacancyAccordion {
max-height: 82px;
overflow: hidden; }
.VacancyAccordion-open {
overflow: visible;
max-height: 368px; }
.VacancyAccordion-content {
max-width: 960;
margin: 0 auto;
padding: 30px 100px 78px; }
.VacancyAccordion-document {
height: auto;
border-radius: 8px;
display: flex;
box-align: center;
align-items: center;
padding: 10px 0;
text-decoration: none; }
.VacancyAccordion-document:hover {
transition: color 0.4s ease;
color: #ff4114; }
.VacancyAccordion-document h3 {
font-family: "Roboto", regular;
font-size: 17px;
letter-spacing: 0;
line-height: 40px;
cursor: pointer; }
.VacancyAccordion-container {
max-width: 960px;
border-top: 1px solid #e2e6e8;
margin: 0 auto;
height: 80px;
cursor: pointer; }
.VacancyAccordion-container:hover {
transition: color 0.4s ease;
color: #ff4114; }
.VacancyAccordion-wrapper {
display: flex;
align-items: center;
height: 100%;
box-pack: justify;
justify-content: space-between;
box-align: center; }
.VacancyAccordion-wrapper h3 {
font-family: "Roboto", regular;
font-size: 21px;
letter-spacing: 0; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('.VacancyAccordion').on('click', '.VacancyAccordion-container', function(event){
$(event.delegateTarget).toggleClass('VacancyAccordion-open')
});
});
</script>
</head>
<body>
<div class="VacancyAccordion" >
<div class="VacancyAccordion-container">
<div class="VacancyAccordion-wrapper">
<h3>Самара</h3>
<div class="VacancyAccordion-open">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>
</div>
</div>
</div>
<div class="VacancyAccordion-content">
<div class="VacancyAccordion-document">
<h3 class="VacancyAccordion-document">
<span>
Вакансия1
</span>
</h3>
</div>
<div class="VacancyAccordion-document">
<h3 class="VacancyAccordion-document">
<span>
Вакансия2
</span>
</h3>
</div>
</div>
</div>
</body>
</html>
|