Menulis blog

serba serbi tentang menulis blog

Membuat FAQ Accordion dengan CSS + JS

Membuat FAQ Accordion dengan CSS + JS

Saya sudah menuliskan Membuat FAQ dengan blok Details di WordPress. Tulisan kali ini saya mencoba membuat FAQ masih tanpa plugin dengan menggunakan CSS dan Java script di WordPress dengan meletakkan semuanya dalam block CustomHTML. Mulai dari CSS untuk stylenya, kode HTML dan juga Java Scriptnya disalin ke dalam CustomHTML.

Kode yang sama di sini bisa langsung disalin ke HTML View blogspot dan akan menghasilkan FAQ yang sama. Hasilnya bisa dilihat di halaman Blog Blogger Menulis Blog.

Yang perlu diperhatikan adalah urutan menyalinnya. Untuk Style CSS saya salin diantara tag <style> dan </style> sedangkan untuk kode HTML biasanya apa yang ada di antara tag <body> dan </body> tanpa mengikutsertakan tagnya dan terakhir adalah kode Java script diletakkan di antara <script> dan </script>

Saya menemukan 2 cara untuk membuat accordion di WordPress yang bisa dimasukkan ke dalam blok CustomHTML. Cara belajarnya adalah menyalin sesuai petunjuk, kemudian mengganti teks FAQ nya disesuaikan dengan kebutuhan.

Teks FAQ di dalam Java Script

Saya meniru langsung dari video tutorial yang ada di Youtube dan kode yang disediakan oleh channel tersebut di github.

Video tutorial dari Youtube
  • Pertama tambahkan style tag <style> dan tutupnya tentunya </style>. Lalu salin semua css nya di antara 2 tag tersebut.
  • Langkah berikutnya salin kode HTML nya masih di dalam Custom HTML tetapi di bawah style tag. Kode HTML yang disalin tentunya bagian yang ingin ditampilkan.
  • Di bagian bawah setelah html, salin kode Java scriptnya di antara tag <script> dan </script>

Begini Hasil FAQ di mana pertanyaan langsung di dalam kode JavaScriptnya

Frequently Asked Questions

Kode FAQ menggunakan CSS, HTML dan JavaScriptnya

Berikut ini kode lengkapnya jika ada yang ingin menyalinnya. 
<!-- Bagian pertama, CSS untuk Style -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap");

h2.faq-heading {
  font-family: "Inter", sans-serif;
  text-align: center;
  font-weight: 300;
  font-size: 28px;
  color: #1d3557;
  margin: 8px 0;
  margin-top: 60px;
}

.faq-container {
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 4px 50px -8px rgba(0, 0, 0, 0.3);
  margin: 32px auto;
  font-family: "Inter", sans-serif;
  color: #1d3557;
  line-height: 1.9;
}

.faq-container .question-container {
  border-bottom: 1px solid #eee;
}

.faq-container .question {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  font-size: 18px;
  font-weight: bold;
  padding: 16px 24px;
  cursor: pointer;
}

.faq-container .question .question-icon {
  width: 20px;
  height: 20px;
  background: #eee;
  padding: 4px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  transition: all 300ms ease;
}

.faq-container .question-container.expanded .question-icon {
  background: #2a9d8f;
  color: #fff;
  transform: rotateZ(180deg);
}

.faq-container .answer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0;
}

.faq-container .answer .answer-icon {
  width: 20px;
  flex-shrink: 0;
  color: blue;
  display: flex;
  margin-top: 5px;
}

.faq-container .answer-container {
  padding: 0px 32px;
  background: #edf2f4;
  max-height: 0;
  overflow: hidden;
  transition: all 300ms ease;
}

.faq-container .question-container.expanded .answer-container {
  max-height: 500px;
  padding: 8px 32px;
}
</style>

<!-- Bagian kedua, Bagian HTML menampilkan FAQ -->

<h2 class="faq-heading">Frequently Asked Questions</h2>
<div class="faq-container"></div>

<!-- Bagian ketiga, JavaScript isi dari FAQ -->
<script>
const FAQData = [
  {
    question: "Bagaimana mengubah pertanyaannya?",
    answer: [
      "Cari bagian kode javascript.",
      "Cari kata question dan gantilah di situ pertanyaanya.",
      "Ganti bagian jawabannya setelah bagian answer.",
    ],
  },
  {
    question: "Apakah jawaban dari pertanyaan harus selalu berupa list dan lebih dari 1 hal?",
    answer: [
      "Tidak, ini contoh jawaban hanya satu poin, kita hanya perlu memperhatikan bagaimana tanda koma digunakan memisahkan poin jawaban.",
    ],
  },
  {
    question: "Kalau ingin menambah pertanyaan bagaimana?",
    answer: [
      "Perhatikan pola java scriptnya.",
      "Salin dari antara kurung kurawal buka sampai kurawal tutup dan jangan lupa tanda koma di belakang kurawal tutup.",
    ],
  },
  
];

const FAQContainer = document.querySelector(".faq-container");

const removeAllExpanded = () => {
  const questionContainers = document.querySelectorAll(
    ".faq-container .question-container"
  );

  questionContainers.forEach((q) => {
    q.classList.remove("expanded");
    const answerContainer = q.querySelector(".answer-container");
    answerContainer.style.maxHeight = "0";
  });
};

const displayFAQ = () => {
  FAQData.forEach((q) => {
    const answerHTML = q.answer
      .map(
        (a) => `<div class="answer">
        <span class="answer-icon">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            class="w-5 h-5"
          >
            <path
              fill-rule="evenodd"
              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
              clip-rule="evenodd"
            />
          </svg>
        </span>
        ${a}
      </div>`
      )
      .join("");

    const html = `<div class="question">
          ${q.question}
          <span class="question-icon"
            ><svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-6 h-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M19.5 8.25l-7.5 7.5-7.5-7.5"
              />
            </svg>
          </span>
        </div>

        <div class="answer-container">
          ${answerHTML}
        </div>`;

    const questionContainer = document.createElement("div");
    questionContainer.classList.add("question-container");
    questionContainer.innerHTML = html;

    FAQContainer.appendChild(questionContainer);

    const question = questionContainer.querySelector(".question");

    question.addEventListener("click", () => {
      if (!questionContainer.classList.contains("expanded")) {
        removeAllExpanded();
      }

      questionContainer.classList.toggle("expanded");
      const isExpanded = questionContainer.classList.contains("expanded");

      const answerContainer =
        questionContainer.querySelector(".answer-container");
      const contentHeight = answerContainer.scrollHeight;
      answerContainer.style.maxHeight = isExpanded ? `${contentHeight}px` : "0";
    });
  });
};

displayFAQ();
</script>

Kode tersebut tentunya bisa dimodifikasi jika kita mengerti apa makna dari setiap barisnya. Tetapi untuk langkah awal silakan salin ke dalam blok CustomHTML, kemudian ubah-ubah sedikit demi sedikit. Dengan cara demikian dan melihat hasil perubahannya, lama-lama kita akan paham makna dari setiap barisnya.

Bagian pertanyaan dan jawaban

Bagian kode ini adalah bagian terpenting untuk pertanyaan dan jawabannya. Untuk menambah pertanyaan, kode ini mulai dari kurung kurawal sampai kurung kurawal tutup disertai tanda koma perlu disalin dan diletakkan di bagian berikut setelah tanda koma dari pertanyaan sebelumnya.

Teks FAQ dengan memberi CSS+JS pada elemen Button

Salah satu cara lain yang saya temukan untuk membuat FAQ menggunakan CSS dan Java Script adalah menggunakan elemen Button. Contoh ini saya salin dari W3School. Saya menyalin dengan urutan yang sama dengan contoh sebelumnya, yaitu salin CSS, HTML lalu JavaScriptnya.

Hasil FAQ pada elemen Button

Dari situs W3School . Ada banyak contoh lain untuk belajar HTML, CSS dan Javascript di sana.

Bagian pertanyaan kita titipkan pada elemen button, untuk jawaban kita bisa berupa paragraf

Seharusnya bisa berupa hyperlink juga asal kita tahu cara membuat tautan link

Berikut ini tautan ke blog Risna Info

Bisa diubah dari stylenya, tetapi untuk saat ini saya mengambil sesuai contoh saja.

Kalau melihat bagian pertanyaan dan jawaban, pada contoh ini kita mengubah pertanyaannya di bagian elemen button dan jawabannya kita buat style dengan nama class panel.

Bagian pertanyaan pada elemen button, jawaban pada elemen div

Kode FAQ dengan CSS, HTML dan JS pada elemen button

Kode lengkapnya bisa dilihat di sini. 
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

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

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<div>
<button class="accordion">Contoh ini didapat dari mana?</button>
<div class="panel">
  <p>Dari <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol" target="_blank"> situs W3School </a>. Ada banyak contoh lain untuk belajar HTML, CSS dan Javascript di sana.</p>
</div>

<button class="accordion">Apa bedanya bagian ini dengan sebelumnya?</button>
<div class="panel">
  <p>Bagian pertanyaan kita titipkan pada blok button, untuk jawaban kita bisa berupa paragraf</p>
 <p>Seharusnya bisa berupa hyperlink juga asal kita tahu cara membuat tautan link </p>
<p>Berikut ini tautan ke blog <a href="https://risna.info">Risna Info </a> </p>
</div>

<button class="accordion">Apakah warna buttonnya bisa diubah?</button>
<div class="panel">
  <p>Bisa diubah dari stylenya, tetapi untuk saat ini saya mengambil sesuai contoh saja.</p>
</div>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

Secara keseluruhan, kode CSS dan JavaScript versi ini lebih singkat dibandingkan FAQ yang sebelumnya. Cara mengedit pertanyaan dan jawaban juga jauh lebih jelas dipisahkan oleh tag <button class="accordion"> dan </button> untuk pertanyaan dan jawaban di dalam tag <div class="panel"> dan </div>

Pilih yang mana?

Banyak cara membuat FAQ tanpa plugin, tetapi memang butuh ketelitian ketika menyalin contoh kode. Kesalahan satu tanda petik atau tanda koma, kurung kurawal ataupun buka tutup tag bisa membuat kodenya tidak tampil dengan baik.

Jadi selain menggunakan blok details dan summary, tambah lagi nih cara membuat FAQ tanpa plugin tetapi memanfaatkan CSS dan JS.

Masih ada satu cara lagi karena yang saya gunakan di FAQ GeneusDNA Indonesia bukan 2 metode ini, melainkan menggunakan Details dipadu dengan CSS, di mana kode CSS nya dimasukkan ke dalam template wordpress. Tapi itu buat tulisan berikutnya saja ya.

Risna

,
, ,

2 responses to “Membuat FAQ Accordion dengan CSS + JS”

Leave a Reply

Your email address will not be published. Required fields are marked *