Здравствуйте, нужно чтобы выглядело как на скриншоте снизу. (проблема с иконками и с исчезновением блоков)

$(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

Не знаю, как сделать чтобы при клике на конкретный вопрос менялся плюс на минус только у него, а не у всех вопросов. А также чтобы, когда вопрос открывался надо чтобы другие вопросы под ним исчезали(как на скриншоте).

Спасибо!


Ответы (0 шт):