0
Kayıt Ol

Javascript İle Tüm Collapseleri açma

11

●

259

  • 04-11-2019, 21:11:46
    #1
    canpeksen
    canpeksen
    Kimlik doğrulama veya yönetimden onay bekliyor.
    Merhaba, bir yazılım kodladım şuan tek bir nokta eksik kaldı oda şudur;
    alt alta dizili 7 8 tane collapse mevcut. Ben bu collapseleri bir butona atayıp hepsini açıp kapatmak istiyorum nasıl yapabilirim?

    <div id="accordion">
<div class="card">
<div class="card-header" id="heading<?php echo $item["id"]; ?>">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapse<?php echo $item["id"]; ?>" aria-expanded="true" aria-controls="collapse<?php echo $item["id"]; ?>">
<?php echo $item["id"]; ?> - <?php echo $item["deneme"]; ?> - <?php echo $item["deneme2"]; ?> - AAA:<?php echo $item["deneme3"]; ?>
</button>
</h5>
</div>

<div id="collapse<?php echo $item["id"]; ?>" class="collapse" aria-labelledby="heading<?php echo $item["id"]; ?>" data-parent="#accordion">
<div class="card-body">
<?php echo $item["deneme4"]; ?>
</div>
</div>
</div>
<?php } ?>
</div>
  • 04-11-2019, 21:12:31
    #2
    ustunweb
    ustunweb
    collapselerin html betiğini buraya koymadan kimse yardımcı olamaz
  • 04-11-2019, 21:14:12
    #3
    canpeksen
    canpeksen
    ustunweb adlı üyeden alıntı: mesajı görüntüle
    collapselerin html betiğini buraya koymadan kimse yardımcı olamaz 
    <div id="accordion">
<div class="card">
<div class="card-header" id="heading<?php echo $item["id"]; ?>">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapse<?php echo $item["id"]; ?>" aria-expanded="true" aria-controls="collapse<?php echo $item["id"]; ?>">
<?php echo $item["id"]; ?> - <?php echo $item["deneme"]; ?> - <?php echo $item["deneme2"]; ?> - AAA:<?php echo $item["deneme3"]; ?>
</button>
</h5>
</div>

<div id="collapse<?php echo $item["id"]; ?>" class="collapse" aria-labelledby="heading<?php echo $item["id"]; ?>" data-parent="#accordion">
<div class="card-body">
<?php echo $item["deneme4"]; ?>
</div>
</div>
</div>
<?php } ?>
</div>
  • 04-11-2019, 21:19:58
    #5
    absie
    absie
    önelikle collapse idlerini json vs gibi bir yapıda html çıktısı alabilirsin

    daha sonra bu idleri foreach ile döngüye sokarak style.display ="none" yapabilirsin.

    açıp kaatmak için if sorgusu ile if (style.display == "none") {} else diyerek açıksa kapat kapalıysa aç yapabilirsin.

    <div id="collapse<?php echo $item["id"]; ?>"
    yavuzk adlı üyeden alıntı: mesajı görüntüle
    https://jsfiddle.net/j2dneers/
    bu örnek jquery.
  • 04-11-2019, 21:27:52
    #6
    canpeksen
    canpeksen
    yavuzk adlı üyeden alıntı: mesajı görüntüle
    https://jsfiddle.net/j2dneers/
    absie adlı üyeden alıntı: mesajı görüntüle
    önelikle collapse idlerini json vs gibi bir yapıda html çıktısı alabilirsin

    daha sonra bu idleri foreach ile döngüye sokarak style.display ="none" yapabilirsin.

    açıp kaatmak için if sorgusu ile if (style.display == "none") {} else diyerek açıksa kapat kapalıysa aç yapabilirsin.

    <div id="collapse<?php echo $item["id"]; ?>"





    bu örnek jquery.

    Verdiğim kodlara uygun olarak ayarlama şansınız varmıdır hocam acaba?
  • 04-11-2019, 21:53:44
    #7
    absie
    absie
    verdiğin kod sanıyorum bir bütünün sadece bir bölümü. çünkü mantık olarak bir döngü olması gerekiyor. ben döngüyü göremedim. şöyle bir kod vereceğim id yerine class kısmını seçici olarak kullanmak daha mantıklı çünkü class isimlerinin hepsi aynı gördüğüm kadarı ile.

    kodu yazdım ancak gönderemiyorum hata veriyor...

    function gizleac() {
var gizac= document.querySelectorAll('.collapse');
gizac.forEach(function(sor){
var collapsedisplay = sor.style.display;
if (collapsedisplay == "none") {
sor.style.display = "block";
} else {
sor.style.display = "none";
}});
    tamam çözüldü script tagları içine aldığım içinmiş.

    hazırlarığın butona <button onclick="gizleac()" şeklinde ekleme yaparsan fonksiyonu çalıştıracaktır. açıksa kapatır kapalıysa açar.
  • 04-11-2019, 22:09:28
    #8
    canpeksen
    canpeksen
    absie adlı üyeden alıntı: mesajı görüntüle
    verdiğin kod sanıyorum bir bütünün sadece bir bölümü. çünkü mantık olarak bir döngü olması gerekiyor. ben döngüyü göremedim. şöyle bir kod vereceğim id yerine class kısmını seçici olarak kullanmak daha mantıklı çünkü class isimlerinin hepsi aynı gördüğüm kadarı ile.

    kodu yazdım ancak gönderemiyorum hata veriyor...

    function gizleac() {
var gizac= document.querySelectorAll('.collapse');
gizac.forEach(function(sor){
var collapsedisplay = sor.style.display;
if (collapsedisplay == "none") {
sor.style.display = "block";
} else {
sor.style.display = "none";
}});
    tamam çözüldü script tagları içine aldığım içinmiş.

    hazırlarığın butona <button onclick="gizleac()" şeklinde ekleme yaparsan fonksiyonu çalıştıracaktır. açıksa kapatır kapalıysa açar.

    Denedim fakat çalışmadı hocam :/
  • 04-11-2019, 22:18:03
    #9
    absie
    absie
    css kısmında .collapse içeriğini yazabilir misin?

    veya sayfanın linkini versen detaylı bakabilsem?