.::|>آموزش افزودن ابزارک سوالات متداول FAQ<|::.

[Arash.Ranjbar 11]

سلام.

تو این آموزش میخوام بهتون یاد بدم که چجوری قسمت سوالات متداول رو بدون نیاز به افزونه به انجمنتون اضافه کنین.

خب از داشبورد مدیریت در قسمت "صفحه ها" گزینه "بلوک" رو انتخاب کنید در صفحه باز شده گزینه "سفارشی" رو انتخاب و در پایین گزینه "به صورت HTML" رو انتخاب کنید در تب "جزئیات" نام بلوک را وارد کنید و در تب "محتوا" کدهای زیر را قرار دهید:

<div style="text-align: center;">
<h2>سوالات متداول</h2>
</div>
<section class="faq-container">
  <input id="faq1a" name="faq1" type="radio" checked="checked">
  <label for="faq1a">عنوان سوال اول</label>
  <article>
    <p>شرح</p>
  </article>
  <input id="faq1b" name="faq1" type="radio">
  <label for="faq1b">عنوان سوال دوم</label>
  <article>
    <p>شرح</p>
  </article>
  <input id="faq1c" name="faq1" type="radio">
  <label for="faq1c">عنوان سوال سوم</label>
  <article>
    <p>شرح</p>
  </article>
  <input id="faq1d" name="faq1" type="radio">
  <label for="faq1d">عنوان سوال پنجم</label>
  <article>
    <p>شرح</p>
  </article>
</section>

حال در custom.css کدهای زیر را وارد کنید:

/* Start FAQ Accordion Section */
.faq-container {
  text-align: right;
  margin: 10px auto 30px auto;
  position: relative;
}
.faq-container article p { margin: 10px 15px 15px 15px; font-size: 14px; }
.faq-container input[type=radio] {
  background-color: transparent;
  border: 1px solid transparent;
  height: 1px;
  position: absolute;
  width: 1px;
  margin: 4px 0 0 0;
  outline: none;
}
.faq-container input[type=radio] + label {
  background: #EEEEEE;
  border-bottom: 1px solid #fff;
  color: #333;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: normal;
  line-height: 32px;
  padding: 10px 15px;
  position: relative;
  z-index: 20;
}
.faq-container input[type=radio] + label:before,
.faq-container input[type=radio] + label:after {
  display: inline-block;
  font-family: FontAwesome;
  font-size: 24px;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}
.faq-container input[type=radio] + label:before {
  content: "\f29c";
  padding-right: 10px;
  padding-right: 5px;
}
.faq-container input[type=radio] + label:after {
  content: "\f054";
  float: right;
  padding-left: 10px;
}
.faq-container input[type=radio] + label:hover { background: #D6D6D6; }
.faq-container input[type=radio]:checked + label { background: #EEEEEE; }
.faq-container input[type=radio]:focus + label { background: #BEBEBE; }
.faq-container input[type=radio]:checked + label:hover { background: #D6D6D6; }
.faq-container input[type=radio]:checked + label:after {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
}
.faq-container input[type=radio] + label + article {
  display: none;
  /* display: none; - Content is ignored by screen readers, additionally stops tabbing through hidden content */
  height: 0;
  max-height: 0;
  overflow: hidden;
  /* 0, 0, hidden; - Content is ignored by screen readers, but tab key still steps through hidden elements */
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  -ms-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}
.faq-container input[type=radio]:checked + label + article {
  display: block;
  height: auto;
  max-height: 2000px;
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  -ms-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}
/* End FAQ Accordion Section */

حال در صفحه اول انجمن ابزارک ساخته شده رو از طریق بلوک سفارشی در جای مناسب قرار دهید.

 

امیدوارم موفق باشید