Açılır akordiyon menü de hangi soru cevaba tıklarsam tıklayayım hepsi açılıyor

Arkadaşlar bir sık sorulan sorular sayfam var. Hangi soruya tıklarsam tıklayayım, hepsi açılıyor. Kapatmak için tıklayınca hepsi kapanıyor. Yardımcı olabilecek uzman arkadaş var mı acaba?

<?php 
require_once 'panel/config.php';
$l=explode("/", $_SERVER['REQUEST_URI']);
$isim=end($l);

$sayfa=$crud->tek("SELECT * FROM sayfalar WHERE link='".guvenlik($isim)."'");

$meta_baslik=$sayfa['baslik']." | ".$ayarcek['site_baslik'];
$meta_aciklama=mb_substr(strip_tags($sayfa['icerik']), 0,160);
$meta_one_cikan=dosya.$ayarcek['site_logo'];

require_once 'header2.php';

// SSS ve SSS Kategoriler tablosu için sorgular
$sss_kategoriler = $crud->cok("SELECT * FROM sss_kategoriler");
$sss = $crud->cok("SELECT * FROM sss");
?>

<style>
.page-loader {
    display: none!important;
}

/* Genel sayfa stili */
.container {
    max-width: 95%; /* Sayfanın maksimum genişliği */
    margin: 0 auto; /* Ortalamak için otomatik kenar boşlukları */
    padding: 0 15px; /* Kenar boşlukları */
}

/* Kart stili */
.card {
    margin-top: 10px;
    background-color: #1D2333; /* Kartın arka plan rengi */
    border: none; /* Kartın kenar rengi */
    border-radius: 0px;
    margin-bottom: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
}

h3 {
    margin-top: 15px; 
    margin-bottom: 8px; 
}

.card-header {
    background-color: #2b344a; /* Kart başlığının arka plan rengi */
    font-size: 1em;
    border-bottom: 0px solid #444444; /* Başlık alt çizgisi */
}

.card-body {
    font-size: 1em;
}

/* FaqMenuList stil ayarları */
.FaqMenuList {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* FaqMenuItem stil ayarları */
.FaqMenuItem {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 0px;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

.FaqMenuItem i {
    margin-right: 10px;
    font-size: 18px;
    color: #b4b4b4;
}

.FaqMenuItem:hover {
    background-color: #2b344a;
    color: #fff; /* Yazının rengi beyaz */
}

.FaqMenuItem:hover i {
    color: #fff; /* İkonların hover sırasında beyaz olması */
}

/* Renk ve stil ayarları */ 
.FaqMenuItem[data-action-position="genel-bilgiler"] i {
    color: #b4b4b4;
}

.FaqMenuItem[data-action-position="bakiye-odeme"] i {
    color: #b4b4b4;
}

.FaqMenuItem[data-action-position="hesap-islemleri"] i {
    color: #b4b4b4;
}

.FaqMenuItem[data-action-position="ilan-islemleri"] i {
    color: #b4b4b4;
}

.FaqMenuItem[data-action-position="siparis-islemleri"] i {
    color: #b4b4b4;
}

.FaqMenuItem[data-action-position="guvenlik"] i {
    color: #b4b4b4;
}

/* Hover (mouse üzerine geldiğinde) ikon rengi */
.FaqMenuItem[data-action-position="genel-bilgiler"]:hover i {
    color: #fff; /* İkonların hover sırasında beyaz olması */
}

.FaqMenuItem[data-action-position="bakiye-odeme"]:hover i {
    color: #fff; /* İkonların hover sırasında beyaz olması */
}

.FaqMenuItem[data-action-position="hesap-islemleri"]:hover i {
    color: #fff; /* İkonların hover sırasında beyaz olması */
}

.FaqMenuItem[data-action-position="ilan-islemleri"]:hover i {
    color: #fff; /* İkonların hover sırasında beyaz olması */
}

.FaqMenuItem[data-action-position="siparis-islemleri"]:hover i {
    color: #fff; /* İkonların hover sırasında beyaz olması */
}

.FaqMenuItem[data-action-position="guvenlik"]:hover i {
    color: #fff; /* İkonların hover sırasında beyaz olması */
}

/* Duyarlı tasarım ayarları */
@media (max-width: 768px) {
    .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.accordion {
    background-color: #2b344a;
    color: #b4b4b4;
    cursor: pointer;
    padding: 15px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    margin-bottom: 5px;
    box-sizing: border-box; /* Ensure padding is included in width */
}

.accordion.active, .accordion:hover {
    background-color: #1d2333;
}

.panel {
    padding: 15px;
    display: none;
    background-color: white;
    overflow: hidden;
    border: 1px solid #ddd;
    border-top: none;
}

.SearchBoxBorder {
    border: none;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 20px;
}

.FilterTextBig {
    width: 100%;
    height: 60px;
    margin-bottom: 20px;
    background: #10141e;
    border: none;
    padding: 15px;
    color: #bcc3d7;
    border-radius: 4px;
    font-size: 17px;
    font-family: inter, sans-serif!important;
    padding-inline: 30px;
}
</style>


<section class="page-main">
    <div class="container">
        <div class="row">
            <div class="col-12 page-header">
                <h1 class="page-title" style="color: #fff;">Yardım Merkezi</h1>
                <p style="color: #b4b4b4;">Aşağıdaki listede keyavm ile ilgili yardım başlıklarını aşağıdaki alanda arayabilirsiniz.</p> 
                <br>
            </div>
            <div class="col-12">
                <div class="SearchBoxBorder">
                    <input type="search" name="myInput" id="myInput" class="FilterTextBig" placeholder="Size nasıl yardımcı olabiliriz?">
                </div>
            </div>
        </div>
    </div>
</section>

<section class="page-content">
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-12">                                                       
                <div class="card faq-sticky-card">
                    <div class="card-body">
                        <ul class="FaqMenuList">
                            <?php 
                            if (!empty($sss_kategoriler)) {
                                foreach ($sss_kategoriler as $kategori) { ?>
                                    <li class="FaqMenuItem" data-action-position="<?php echo $kategori['kategori_id']; ?>" onclick="scrollToCategory(<?php echo $kategori['kategori_id']; ?>)">
                                        <i class="<?php echo $kategori['kategori_ikon']; ?>"></i> <?php echo $kategori['kategori_isim']; ?>
                                    </li>
                                <?php }
                            } else {
                                echo "<li>Kategori bulunamadı.</li>";
                            } ?>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-9 col-12">
                <div id="accordion">
                    <?php 
                    if (!empty($sss_kategoriler)) {
                        foreach ($sss_kategoriler as $kategori) {
                            $kategori_id = $kategori['kategori_id'];
                            $kategori_sss = array_filter($sss, function($soru) use ($kategori_id) {
                                return $soru['kategori_id'] == $kategori_id;
                            });

                            if (!empty($kategori_sss)) { ?>
                                <div class="category-section" id="category-<?php echo $kategori['kategori_id']; ?>">
                                    <h3 class="category-title"><?php echo $kategori['kategori_isim']; ?></h3>
                                    <?php 
                                    foreach ($kategori_sss as $soru) { ?>
                                        <div class="card post-faq-card" data-position="<?php echo $soru['link']; ?>">
                                            <div class="card-header" style="cursor:pointer" data-action-position="<?php echo $soru['link']; ?>" data-toggle="collapse" data-target="#collapse_<?php echo $soru['id']; ?>" aria-expanded="false" aria-controls="collapse_<?php echo $soru['id']; ?>">
                                                <span class="card-link"><?php echo $soru['soru']; ?></span>
                                            </div>
                                            <div id="collapse_<?php echo $soru['id']; ?>" class="collapse">
                                                <div class="card-body" style="padding: 15px;">
                                                    <?php echo $soru['cevap']; ?>
                                                </div>
                                            </div>
                                        </div>
                                    <?php } ?>
                                </div>
                            <?php }
                        }
                    } else {
                        echo "<p>SSS bulunamadı.</p>";
                    } ?>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
function scrollToCategory(categoryId) {
    // Kategori başlığına kaydır
    var categorySection = document.getElementById('category-' + categoryId);
    if (categorySection) {
        categorySection.scrollIntoView({ behavior: 'smooth' });
    }
}

// Arama fonksiyonu
document.getElementById('myInput').addEventListener('input', function() {
    var input, filter, cards, cardContainer, categories, categoryTitles, i, j, categoryHasResults;
    input = document.getElementById('myInput');
    filter = input.value.toLowerCase();
    cardContainer = document.getElementById('accordion');
    cards = cardContainer.getElementsByClassName('post-faq-card');
    categories = cardContainer.getElementsByClassName('category-section');

    for (i = 0; i < categories.length; i++) {
        categoryHasResults = false;
        cards = categories[i].getElementsByClassName('post-faq-card');

        for (j = 0; j < cards.length; j++) {
            title = cards[j].getElementsByClassName("card-link")[0];
            if (title.innerText.toLowerCase().indexOf(filter) > -1) {
                cards[j].style.display = "";
                categoryHasResults = true;
            } else {
                cards[j].style.display = "none";
            }
        }

        if (categoryHasResults) {
            categories[i].style.display = "";
        } else {
            categories[i].style.display = "none";
        }
    }
});
</script>

<?php require_once 'footer3.php'; ?>

Acordion için HTML Kodunu şu şekilde değiştirin:

<div id="accordion">
    <?php 
    if (!empty($sss_kategoriler)) {
        foreach ($sss_kategoriler as $kategori) {
            $kategori_id = $kategori['kategori_id'];
            $kategori_sss = array_filter($sss, function($soru) use ($kategori_id) {
                return $soru['kategori_id'] == $kategori_id;
            });

            if (!empty($kategori_sss)) { ?>
                <div class="category-section" id="category-<?php echo $kategori['kategori_id']; ?>">
                    <h3 class="category-title"><?php echo $kategori['kategori_isim']; ?></h3>
                    <?php 
                    foreach ($kategori_sss as $soru) { ?>
                        <div class="card post-faq-card" data-position="<?php echo $soru['link']; ?>">
                            <div class="card-header" style="cursor:pointer" data-toggle="collapse" data-target="#collapse<?php echo $soru['sss_id']; ?>" aria-expanded="false" aria-controls="collapse<?php echo $soru['sss_id']; ?>">
                                <?php echo $soru['soru']; ?>
                            </div>
                            <div id="collapse<?php echo $soru['sss_id']; ?>" class="collapse" data-parent="#accordion">
                                <div class="card-body">
                                    <?php echo $soru['cevap']; ?>
                                </div>
                            </div>
                        </div>
                    <?php }
                    ?>
                </div>
            <?php }
        }
    } else {
        echo "<p>SSS bulunamadı.</p>";
    } ?>
</div>

Javascript kodunu da şöyle güncellerseniz sorun çözülecektir:

<script>
function scrollToCategory(categoryId) {
    var element = document.getElementById('category-' + categoryId);
    if (element) {
        window.scrollTo({
            top: element.offsetTop,
            behavior: 'smooth'
        });
    }
}

document.getElementById("myInput").addEventListener("input", function() {
    var filter = this.value.toUpperCase();
    var faqItems = document.querySelectorAll("#accordion .card");
    faqItems.forEach(function(item) {
        var question = item.querySelector(".card-header").textContent || item.querySelector(".card-header").innerText;
        if (question.toUpperCase().indexOf(filter) > -1) {
            item.style.display = "";
        } else {
            item.style.display = "none";
        }
    });
});
</script>

Hocam ilgin için tşkler. Bir değişiklik olmadı sayfada.

Site url'sini paylaşma şansınız var mı bir de Kodun tamamını şu şekilde değiştirip dener misiniz:

<?php 
require_once 'panel/config.php';
$l=explode("/", $_SERVER['REQUEST_URI']);
$isim=end($l);

$sayfa=$crud->tek("SELECT * FROM sayfalar WHERE link='".guvenlik($isim)."'");

$meta_baslik=$sayfa['baslik']." | ".$ayarcek['site_baslik'];
$meta_aciklama=mb_substr(strip_tags($sayfa['icerik']), 0,160);
$meta_one_cikan=dosya.$ayarcek['site_logo'];

require_once 'header2.php';

// SSS ve SSS Kategoriler tablosu için sorgular
$sss_kategoriler = $crud->cok("SELECT * FROM sss_kategoriler");
$sss = $crud->cok("SELECT * FROM sss");
?>

<style>
.page-loader {
    display: none!important;
}

/* Genel sayfa stili */
.container {
    max-width: 95%; /* Sayfanın maksimum genişliği */
    margin: 0 auto; /* Ortalamak için otomatik kenar boşlukları */
    padding: 0 15px; /* Kenar boşlukları */
}

/* Kart stili */
.card {
    margin-top: 10px;
    background-color: #1D2333; /* Kartın arka plan rengi */
    border: none; /* Kartın kenar rengi */
    border-radius: 0px;
    margin-bottom: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hafif gölge efekti */
}

h3 {
    margin-top: 15px; 
    margin-bottom: 8px; 
}

.card-header {
    background-color: #2b344a; /* Kart başlığının arka plan rengi */
    font-size: 1em;
    border-bottom: 0px solid #444444; /* Başlık alt çizgisi */
}

.card-body {
    font-size: 1em;
}

/* FaqMenuList stil ayarları */
.FaqMenuList {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* FaqMenuItem stil ayarları */
.FaqMenuItem {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 0px;
    transition: background-color 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

.FaqMenuItem i {
    margin-right: 10px;
    font-size: 18px;
    color: #b4b4b4;
}

.FaqMenuItem:hover {
    background-color: #2b344a;
    color: #fff; /* Yazının rengi beyaz */
}

.FaqMenuItem:hover i {
    color: #fff; /* İkonların hover sırasında beyaz olması */
}

/* Renk ve stil ayarları */
.FaqMenuItem[data-action-position="genel-bilgiler"] i {
    color: #b4b4b4;
}

.FaqMenuItem[data-action-position="bakiye-odeme"] i {
    color: #b4b4b4;
}

.FaqMenuItem[data-action-position="hesap-islemleri"] i {
    color: #b4b4b4;
}

.FaqMenuItem[data-action-position="ilan-islemleri"] i {
    color: #b4b4b4;
}

.FaqMenuItem[data-action-position="siparis-islemleri"] i {
    color: #b4b4b4;
}

.FaqMenuItem[data-action-position="guvenlik"] i {
    color: #b4b4b4;
}

/* Hover (mouse üzerine geldiğinde) ikon rengi */
.FaqMenuItem[data-action-position="genel-bilgiler"]:hover i {
    color: #fff; /* İkonların hover sırasında beyaz olması */
}

.FaqMenuItem[data-action-position="bakiye-odeme"]:hover i {
    color: #fff; /* İkonların hover sırasında beyaz olması */
}

.FaqMenuItem[data-action-position="hesap-islemleri"]:hover i {
    color: #fff; /* İkonların hover sırasında beyaz olması */
}

.FaqMenuItem[data-action-position="ilan-islemleri"]:hover i {
    color: #fff; /* İkonların hover sırasında beyaz olması */
}

.FaqMenuItem[data-action-position="siparis-islemleri"]:hover i {
    color: #fff; /* İkonların hover sırasında beyaz olması */
}

.FaqMenuItem[data-action-position="guvenlik"]:hover i {
    color: #fff; /* İkonların hover sırasında beyaz olması */
}

/* Duyarlı tasarım ayarları */
@media (max-width: 768px) {
    .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.accordion {
    background-color: #2b344a;
    color: #b4b4b4;
    cursor: pointer;
    padding: 15px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    margin-bottom: 5px;
    box-sizing: border-box; /* Ensure padding is included in width */
}

.accordion.active, .accordion:hover {
    background-color: #1d2333;
}

.panel {
    padding: 15px;
    display: none;
    background-color: white;
    overflow: hidden;
    border: 1px solid #ddd;
    border-top: none;
}

.SearchBoxBorder {
    border: none;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 20px;
}

.FilterTextBig {
    width: 100%;
    height: 60px;
    margin-bottom: 20px;
    background: #10141e;
    border: none;
    padding: 15px;
    color: #bcc3d7;
    border-radius: 4px;
    font-size: 17px;
    font-family: inter, sans-serif!important;
    padding-inline: 30px;
}
</style>


<section class="page-main">
    <div class="container">
        <div class="row">
            <div class="col-12 page-header">
                <h1 class="page-title" style="color: #fff;">Yardım Merkezi</h1>
                <p style="color: #b4b4b4;">Aşağıdaki listede keyavm ile ilgili yardım başlıklarını aşağıdaki alanda arayabilirsiniz.</p> 
                <br>
            </div>
            <div class="col-12">
                <div class="SearchBoxBorder">
                    <input type="search" name="myInput" id="myInput" class="FilterTextBig" placeholder="Size nasıl yardımcı olabiliriz?">
                </div>
            </div>
        </div>
    </div>
</section>

<section class="page-content">
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-12">                                                       
                <div class="card faq-sticky-card">
                    <div class="card-body">
                        <ul class="FaqMenuList">
                            <?php 
                            if (!empty($sss_kategoriler)) {
                                foreach ($sss_kategoriler as $kategori) { ?>
                                    <li class="FaqMenuItem" data-action-position="<?php echo $kategori['kategori_id']; ?>" onclick="scrollToCategory(<?php echo $kategori['kategori_id']; ?>)">
                                        <i class="<?php echo $kategori['kategori_ikon']; ?>"></i> <?php echo $kategori['kategori_isim']; ?>
                                    </li>
                                <?php }
                            } else {
                                echo "<li>Kategori bulunamadı.</li>";
                            } ?>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-9 col-12">
                <div id="accordion">
                    <?php 
                    if (!empty($sss_kategoriler)) {
                        foreach ($sss_kategoriler as $kategori) {
                            $kategori_id = $kategori['kategori_id'];
                            $kategori_sss = array_filter($sss, function($soru) use ($kategori_id) {
                                return $soru['kategori_id'] == $kategori_id;
                            });

                            if (!empty($kategori_sss)) { ?>
                                <div class="category-section" id="category-<?php echo $kategori['kategori_id']; ?>">
                                    <h3 class="category-title"><?php echo $kategori['kategori_isim']; ?></h3>
                                    <?php 
                                    foreach ($kategori_sss as $soru) { ?>
                                        <div class="card post-faq-card" data-position="<?php echo $soru['link']; ?>">
                                            <div class="card-header" style="cursor:pointer" data-toggle="collapse" data-target="#collapse<?php echo $soru['sss_id']; ?>" aria-expanded="false" aria-controls="collapse<?php echo $soru['sss_id']; ?>">
                                                <?php echo $soru['soru']; ?>
                                            </div>
                                            <div id="collapse<?php echo $soru['sss_id']; ?>" class="collapse" data-parent="#accordion">
                                                <div class="card-body">
                                                    <?php echo $soru['cevap']; ?>
                                                </div>
                                            </div>
                                        </div>
                                    <?php }
                                    ?>
                                </div>
                            <?php }
                        }
                    } else {
                        echo "<p>SSS bulunamadı.</p>";
                    } ?>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
function scrollToCategory(categoryId) {
    var element = document.getElementById('category-' + categoryId);
    if (element) {
        window.scrollTo({
            top: element.offsetTop,
            behavior: 'smooth'
        });
    }
}

document.getElementById("myInput").addEventListener("input", function() {
    var filter = this.value.toUpperCase();
    var faqItems = document.querySelectorAll("#accordion .card");
    faqItems.forEach(function(item) {
        var question = item.querySelector(".card-header").textContent || item.querySelector(".card-header").innerText;
        if (question.toUpperCase().indexOf(filter) > -1) {
            item.style.display = "";
        } else {
            item.style.display = "none";
        }
    });
});
</script>

<?php require_once 'footer.php'; ?>

Olmadı hocam. localhostta çalıştırıyorum şu anda.

Yokmu forumda yardımcı olabilecek koca yürekli uzman bir arkadaş.