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'; ?>