<div class=”custom-accordion”>
<div class=”accordion-item”>
<div class=”accordion-header”>سوال ۱: نمونه سوال</div>
<div class=”accordion-content”>
<p>جواب سوال ۱: اینجا می‌توانید توضیحات یا پاسخ مربوطه را وارد کنید.</p>
</div>
</div>
<div class=”accordion-item”>
<div class=”accordion-header”>سوال ۲: نمونه سوال</div>
<div class=”accordion-content”>
<p>جواب سوال ۲: اینجا می‌توانید توضیحات یا پاسخ مربوطه را وارد کنید.</p>
</div>
</div>
<!– در صورت نیاز آیتم‌های بیشتری اضافه کنید –>
</div>

<style>
/* استایل آکاردئون */
.custom-accordion .accordion-item {
border: 1px solid #ddd;
margin-bottom: 5px;
}
.custom-accordion .accordion-header {
background: #f7f7f7;
padding: 10px 40px; /* افزایش فاصله برای آیکون */
font-weight: bold;
cursor: pointer;
position: relative;
}
.custom-accordion .accordion-header:after {
content: “+”;
position: absolute;
left: 10px; /* تغییر به سمت چپ */
font-size: 18px;
font-weight: bold;
}
.custom-accordion .accordion-item.active .accordion-header:after {
content: “-“;
}
.custom-accordion .accordion-content {
display: none;
padding: 10px;
background: #fff;
}
.custom-accordion .accordion-item.active .accordion-content {
display: block;
}
</style>

<script>
jQuery(document).ready(function($) {
$(‘.custom-accordion .accordion-header’).click(function() {
var parentItem = $(this).parent();
// بستن سایر آیتم‌ها
parentItem.siblings(‘.accordion-item’)
.removeClass(‘active’)
.find(‘.accordion-content’)
.slideUp();

// باز/بسته کردن آیتم فعلی
parentItem.toggleClass(‘active’);
$(this).next(‘.accordion-content’).slideToggle();
});
});
</script>