• 22-03-2021, 23:22:07
    #1
    merhabalar bu tarz soru cevap kısmı zannediyorum eklentisiz yapılıyor nasıl yabilirim acaba ?


  • 22-03-2021, 23:23:49
    #2
    Accordion plugin
  • 22-03-2021, 23:24:04
    #3
    Üyeliği durduruldu
    Elemantor eklentisini kurup yapabilirsiniz.

    veya direk bu ve benzeri akordiyon eklentilerinden de yapabilirsiniz

    https://tr.wordpress.org/plugins/accordions/
  • 22-03-2021, 23:25:53
    #4
    İllede eklenti kullanmak istemiyorum diyorsan örnek bir html kodu

    <button class="accordion">Section 1</button>
    <div class="panel">
      <p>Lorem ipsum...</p>
    </div>
    
    <button class="accordion">Section 2</button>
    <div class="panel">
      <p>Lorem ipsum...</p>
    </div>
    
    <button class="accordion">Section 3</button>
    <div class="panel">
      <p>Lorem ipsum...</p>
    </div>
    Css kodu

    /* Style the buttons that are used to open and close the accordion panel */
    .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      text-align: left;
      border: none;
      outline: none;
      transition: 0.4s;
    }
    
    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .active, .accordion:hover {
      background-color: #ccc;
    }
    
    /* Style the accordion panel. Note: hidden by default */
    .panel {
      padding: 0 18px;
      background-color: white;
      display: none;
      overflow: hidden;
    }
    JS KODU

    var acc = document.getElementsByClassName("accordion");
    var i;
    
    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        /* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
        this.classList.toggle("active");
    
        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
          panel.style.display = "none";
        } else {
          panel.style.display = "block";
        }
      });
    }
    Kaynak: https://www.w3schools.com/howto/howto_js_accordion.asp
  • 22-03-2021, 23:36:33
    #5
    Google’a Faq Plugin yazarak uygun gördüğünüz eklentiyi yükleyin. Ayarlarını yaptıktan sonra eklentinin size verdiği kısa kodu, gözükmesini istediğiniz sayfaya ekleyin, işlem bu kadar
  • 22-03-2021, 23:48:05
    #6
    Üyeliği durduruldu
    İlgili arkadaşlar gayet güzel ve birçok açıdan anlatmışlar. Eğer olurda gene yapamazsanız lütfen yazın, ücretsiz destek sunalım.
  • 22-03-2021, 23:49:54
    #7
    acilwebtasarim adlı üyeden alıntı: mesajı görüntüle
    Accordion plugin
    minnox adlı üyeden alıntı: mesajı görüntüle
    Elemantor eklentisini kurup yapabilirsiniz.

    veya direk bu ve benzeri akordiyon eklentilerinden de yapabilirsiniz

    https://tr.wordpress.org/plugins/accordions/
    acilwebtasarim adlı üyeden alıntı: mesajı görüntüle
    İllede eklenti kullanmak istemiyorum diyorsan örnek bir html kodu

    <button class="accordion">Section 1</button>
    <div class="panel">
      <p>Lorem ipsum...</p>
    </div>
    
    <button class="accordion">Section 2</button>
    <div class="panel">
      <p>Lorem ipsum...</p>
    </div>
    
    <button class="accordion">Section 3</button>
    <div class="panel">
      <p>Lorem ipsum...</p>
    </div>
    Css kodu

    /* Style the buttons that are used to open and close the accordion panel */
    .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      text-align: left;
      border: none;
      outline: none;
      transition: 0.4s;
    }
    
    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .active, .accordion:hover {
      background-color: #ccc;
    }
    
    /* Style the accordion panel. Note: hidden by default */
    .panel {
      padding: 0 18px;
      background-color: white;
      display: none;
      overflow: hidden;
    }
    JS KODU

    var acc = document.getElementsByClassName("accordion");
    var i;
    
    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        /* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
        this.classList.toggle("active");
    
        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
          panel.style.display = "none";
        } else {
          panel.style.display = "block";
        }
      });
    }
    Kaynak: https://www.w3schools.com/howto/howto_js_accordion.asp
    VillaDunyam adlı üyeden alıntı: mesajı görüntüle
    İlgili arkadaşlar gayet güzel ve birçok açıdan anlatmışlar. Eğer olurda gene yapamazsanız lütfen yazın, ücretsiz destek sunalım.
    hepinize sonsuz teşekkürler desteğiniz ile hallettim