ویژه سوالات متداول

[nima]

[HIDESHOWTOGROUPS=12,4,13,3,10,11,6,5,7]
ابتدا وارد قسمت تالارها بشیدو
روی افزودن گره کلیک کنید و نوع رو برگه انتخاب کنید.
دایرکتور: motadavel
عنوان: سوالات متداول
الگو:

<main class="card">
  <div class="hero">
    <img src="https://raw.githubusercontent.com/ArtemPonomarenko/FAQ-Accordion/main/images/illustration-woman-online-mobile.svg" alt="section image" class="img">
  </div>

  <h2 class="title">سوالات متداول</h2>

  <div class="acc-container">

    <button class="acc-btn">این چیه؟</button>
    <div class="acc-content">
      <p>
        ی فرم.
      </p>
    </div>

    <button class="acc-btn">
      چیکارش کنم؟
    </button>
    <div class="acc-content">
      <p>
        بخونش.
      </p>
    </div>

    <button class="acc-btn">
     بهترین حیوون دنیا؟
    </button>
    <div class="acc-content">
      <p>
       بز.
      </p>
    </div>

    <button class="acc-btn">
     بهترین موئسیقی?
    </button>
    <div class="acc-content">
      <p>
       ملودی. 🙈
      </p>
    </div>

    <button class="acc-btn">
     کی این رو ساخته?
    </button>
    <div class="acc-content">
      <p>
       نیما.
      </p>
    </div>

    <button class="acc-btn">
    از کجا?
    </button>
    <div class="acc-content">
      <p>
        خونش
      </p>
    </div>

    <button class="acc-btn">
     حالت چطوره?
    </button>
    <div class="acc-content">
      <p>
       خوب.
      </p>
    </div>

    <button class="acc-btn">
     فرم خوبیه؟
    </button>
    <div class="acc-content">
      <p>
        صد در صد..
      </p>
    </div>

  </div>
</main>

<p class="credit">
  Built with ❤️ by <a href="https://xffa.ir/">nima</a>. <br />
<style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
.card {
    background: #dad5d5;
    color: #333;
    margin: 15rem auto;
    width: 90%;
    max-width: 50rem;
    min-height: 30rem;
    border-radius: 2rem;
}

.hero {
    display: flex;
    justify-content: center;
    transform: translateY(-25%);
}
.hero .img {
    filter: drop-shadow(0rem 1.5rem rgba(0,0,0,0.1));
    transition: 0.3s ease-out;
}
.card:hover .img {
    filter: drop-shadow(0rem 2.5rem rgba(0,0,0,0.1));
}

.title {
    text-align: center;
    font-size: 5rem;
    padding: 1rem;
}

.acc-container {
    padding: 4rem 2rem;
}
.acc-btn {
    width: 100%;
    padding: 1.6rem 2rem;
    font-size: 1.6rem;
    cursor: pointer;
    background: inherit;
    border: none;
    outline: none;
    text-align: left;
    transition: all 0.5s linear;
}
.acc-btn:after {
    content: "\27A4";
    color: #fa8d0c;
    float: right;
    transition: all 0.3s linear;
}
.acc-btn.is-open:after {
    transform: rotate(90deg);
}
.acc-btn:hover, .acc-btn.is-open {
    color: #000;
    font-weight: bold;
}

.acc-content {
    max-height: 0;
    color: rgba(0,0,0,0.75);
    font-size: 1.5rem;
    margin: 0 2rem;
    padding-left: 1rem;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    border-bottom: 1px solid #ccc;
}

.credit {
    text-align: center;
    padding: 1rem;
}
.credit a {
    text-decoration: wavy underline;
    color: dodgerblue;
}
    </style>
    <script>
    const btns = document.querySelectorAll(".acc-btn");

// fn
function accordion() {
  // this = the btn | icon & bg changed
  this.classList.toggle("is-open");

  // the acc-content
  const content = this.nextElementSibling;

  // IF open, close | else open
  if (content.style.maxHeight) content.style.maxHeight = null;
  else content.style.maxHeight = content.scrollHeight + "px";
}

// event
btns.forEach((el) => el.addEventListener("click", accordion));



    </script>

سوالات و جواب ها رو در الگو دلخواه تغییر بدید
نمایش در لیست تالار ها رو تیک نزنید اما وضعیت پیشرفته رو تیک بزنید و ذخیره کنید.
حالا وارد پیکربندی و فهرست عمومی بشید و روی افزودن فهرست کلیک کنید.
شناسه: motadavels
عنوان: سوالات متداول
ترتیب نمایش: 500 یا عددی بالاتر
نوع : گره و از لیست جلوش روی سوالات متداول کلیک کنید.
و ذخیره کنید.

[/HIDESHOWTOGROUPS]

 

[aca]

مشاهده فایل‌پیوست 8137مشاهده فایل‌پیوست 8138

[Hidden content]

استفاده کردم و عالی بود
خسته نباشید

 

[Mehdi]

مرسی نیما جان
عالی بود.
واقعا انجمنم به یه همچین برگه ای نیاز داشت.
آموزشهای مربوط به برگه ها میتونه در کارآمدتر کردن یه انجمن خیلی کمک کننده تر باشه.
بازهم مرسی از شما و سایر مدیران پرتلاش