Есть код который сворачивает / разворачивает карточки.
Пример работы кода можете посмотреть на сайте 2 блок где карта.
Как сделать чтобы при клике на другой плюсик уже открытые карточки закрывались?
$(".marker").click(function() {
$(this).toggleClass("show"),
$(this).find(".marker_info").toggleClass("show"),
$(this).siblings().removeClass("show"),
$(this).siblings().find(".marker_info").removeClass("show");
})
$(document).on("click", function(t) {
$(t.target).closest(".marker").length || ($(".marker").removeClass("show"),
$(".marker").find(".marker_info").removeClass("show")),
t.stopPropagation();
})
.marker {
position: absolute;
width: 16px;
height: 16px;
cursor: pointer;
opacity: 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease
}
.marker span {
background-color: #51AB00;
width: 16px;
height: 16px;
display: block;
-webkit-border-radius: 100%;
border-radius: 100%;
position: relative;
z-index: 2;
background-image: url(../images/marker.png);
background-size: 10px;
background-repeat: no-repeat;
background-position: 3px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: background-color .3s ease, -webkit-transform .3s ease;
transition: background-color .3s ease, -webkit-transform .3s ease;
-moz-transition: background-color .3s ease, transform .3s ease, -moz-transform .3s ease;
transition: background-color .3s ease, transform .3s ease;
transition: background-color .3s ease, transform .3s ease, -webkit-transform .3s ease, -moz-transform .3s ease;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.marker:after,
.marker:before {
content: " ";
position: absolute;
background: rgba(255, 255, 255, 1);
top: -6px;
left: -6px;
bottom: -6px;
right: -6px;
z-index: 1;
-webkit-border-radius: 100%;
border-radius: 100%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%
}
.marker:after {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease
}
.marker:before {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease
}
.marker:hover:after {
-webkit-transform: scale(6);
-moz-transform: scale(6);
-ms-transform: scale(6);
transform: scale(6);
opacity: .4;
background: #fff;
}
.marker:hover:before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 0.5;
background: #fff;
}
.marker.show {
z-index: 9;
}
.marker.show span {
background-color: #fff;
background-position: 5px 5px;
color: #fff;
}
.marker.show:after,
.marker.show:before {
background: rgba(255, 255, 255, 0.7)
}
.marker_info {
position: absolute;
top: 12px;
left: 50%;
margin-left: -130px;
width: 360px;
padding: 16px;
-webkit-border-radius: 0;
border-radius: 0;
display: none;
-webkit-box-shadow: 0px 12px 51px 0px rgba(0, 0, 0, 0.39);
box-shadow: 0px 12px 51px 0px rgba(0, 0, 0, 0.39)
}
.marker_info p {
font-size: 14px;
font-weight: 300;
margin-bottom: 5px;
}
.marker_info h6 {
font-size: 16px;
font-weight: 900;
margin-top: 6px;
margin-bottom: 6px;
}
.marker_info .card-body {
padding: 0px;
}
.marker_info.show {
display: block;
}
.section_border {
background-color: #fff;
border: 6px solid rgba(255, 255, 255, 0.6);
border-radius: 6px;
background-clip: padding-box;
-webkit-box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1);
}
.marker.show span {
background-color: #e72822;
background-position: 3px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.map-marker h5 {
position: absolute;
font-size: 16px;
font-weight: 300;
text-align: right;
right: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="homepage_intro-hero">
<div class="marker" style="top: 51%; left: 60%; opacity: 1;">
<span></span>
<div class="marker_info section_border">
<div class="row">
<div class="col-md-5">
<img src="images/master1.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-7">
<h6 class="marker_info-title">Алексей</h6>
<p>Статус: <img src="images/cross1.png" alt=""> свободен<br> Опыт: более 5 лет<br>Средн. время прибытия: 56 минут
</p>
<div class="card-body"><a href="#vizovmastera" data-toggle="modal" class="card-link">Вам перезвонить?</a></div>
</div>
</div>
</div>
</div>
</div>