Здравствуйте, нужно чтобы выглядело как на скриншоте снизу. (проблема с иконками и с исчезновением блоков)
$(function(){
$('.faq__quest').click(function(e) {
$('.faq__quest').not(this).next().removeClass('show').slideUp(550);
$(this).next().toggleClass('show').slideToggle(550, function(){
$('.faq__quest').toggleClass("bgi");
});
});
});
.faq__questions {
display: flex;
flex-wrap: wrap;
}
.faq__question {
width: 50%;
margin-bottom: 10px;
position: relative;
z-index: 30px;
}
.faq__quest {
display: flex;
align-items: center;
padding-right: 105px;
padding-left: 30px;
background-color: #fff;
height: 90px;
margin-left: 20px;
border-radius: 10px;
box-shadow: 0px 20px 40px rgba(238, 77, 71, 0.1);
font-weight: 500;
font-size: 18px;
line-height: 30px;
position: relative;
cursor: pointer;
}
.faq__answer{
display: flex;
padding: 40px 0 0;
padding-right: 105px;
padding-left: 30px;
background-color: #FFF7F5;
height: 120px;
margin-left: 20px;
border-top-right-radius: none;
border-top-left-radius: none;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
font-weight: 500;
font-size: 18px;
line-height: 30px;
margin-top: -10px;
cursor: pointer;
}
.faq__quest.bgi::after{
content: "";
position: absolute;
width: 20px;
height: 20px;
background-image: url(https://image.flaticon.com/icons/svg/32/32339.svg);
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
right: 35px;
top: 50%;
transform: translateY(-50%);
transition: all .2s;
}
.faq__quest::after{
content: "";
position: absolute;
width: 20px;
height: 20px;
background-image: url(https://pngimg.com/uploads/minus/minus_PNG55.png);
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
right: 35px;
top: 50%;
transform: translateY(-50%);
transition: all .2s;
}
.faq__answer {
display: none;
}
.faq-load__btn{
text-align: right;
}
.faq-load__btn button{
border: none;
width: 565px;
height: 90px;
background-color: rgba(237, 77, 71, 0.2);
border-radius: 10px;
margin-top: 23px;
position: relative;
color: #ED4D47;
font-weight: 700;
font-size: 18px;
line-height: 30px;
cursor: pointer;
text-transform: uppercase;
outline: none;
}
.faq-load__btn button::after{
content: "";
position: absolute;
width: 20px;
height: 20px;
background-image: url(../images/plus.svg);
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
right: 35px;
top: 50%;
transform: translateY(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="faq__questions">
<div class="faq__question">
<div class="faq__quest bgi">What is a professional traffic permit?</div>
<div class="faq__answer">Traffic permits are a requirement for conducting professional traffic.</div>
</div>
<div class="faq__question">
<div class="faq__quest bgi">When is a professional traffic permit needed?</div>
<div class="faq__answer">Traffic permits are a requirement for conducting professional traffic.</div>
</div>
<div class="faq__question">
<div class="faq__quest bgi">How much does a commercial traffic permit cost for goods?</div>
<div class="faq__answer">Traffic permits are a requirement for conducting professional traffic.</div>
</div>
<div class="faq__question">
<div class="faq__quest bgi">Where to look for a traffic permit?</div>
<div class="faq__answer">Traffic permits are a requirement for conducting professional traffic.</div>
</div>
<div class="faq__question">
<div class="faq__quest bgi">Are there professional traffic permit training courses at a distance?</div>
<div class="faq__answer">Traffic permits are a requirement for conducting professional traffic.</div>
</div>
<div class="faq__question">
<div class="faq__quest bgi">Are there differences between a traffic permit and a professional traffic permit?</div>
<div class="faq__answer">Traffic permits are a requirement for conducting professional traffic.</div>
</div>
<div class="faq__question">
<div class="faq__quest bgi">How to check the traffic condition?</div>
<div class="faq__answer">Traffic permits are a requirement for conducting professional traffic.</div>
</div>
<div class="faq__question">
<div class="faq__quest bgi">How much does a commercial traffic permit cost for goods?</div>
<div class="faq__answer">Traffic permits are a requirement for conducting professional traffic.</div>
</div>
<div class="faq__question">
<div class="faq__quest bgi">What are the requirements for a professional traffic permit?</div>
<div class="faq__answer">Traffic permits are a requirement for conducting professional traffic.</div>
</div>
<div class="faq__question">
<div class="faq__quest bgi">How to plug in for the traffic permit test?</div>
<div class="faq__answer">Traffic permits are a requirement for conducting professional traffic.</div>
</div>
<div class="faq__question">
<div class="faq__quest bgi">Are there professional traffic permit training courses at a distance?</div>
<div class="faq__answer">Traffic permits are a requirement for conducting professional traffic.</div>
</div>
<div class="faq__question">
<div class="faq__quest bgi">How is the sample for a professional traffic permit booked?</div>
<div class="faq__answer">Traffic permits are a requirement for conducting professional traffic.</div>
</div>
</div>
</div>
<div class="faq-load__btn">
<button>Load more</button>
</div>
https://jsfiddle.net/grsssh/459swj1d/7/ ссылка на jsfiddle
должно получится как на скриншоте: https://i.stack.imgur.com/xjsPw.png
Не знаю, как сделать чтобы при клике на конкретный вопрос менялся плюс на минус только у него, а не у всех вопросов. А также чтобы, когда вопрос открывался надо чтобы другие вопросы под ним исчезали(как на скриншоте).
Спасибо!