Tekil Mesaj gösterimi - Açılır akordiyon menü de hangi soru cevaba tıklarsam tıklayayım hepsi açılıyor

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

20-07-2024, 17:41:26

mebularts adlı üyeden alıntı: mesajı görüntüle

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>

mebularts adlı üyeden alıntı: mesajı görüntüle

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.