Перейти к публикации
IPS Invision Community
  • Часто задаваемые вопросы (FAQ)


    Sipsb
     Поделиться

    Делаем блок с часто задаваемыми вопросами через штатное приложение IPS «PAGES (Страницы)»

    Переходим в приложение «PAGES (Страницы)» Блоки --> Plugins

    Скрытый текст

    01.png
    02.png
    03.png

    Переходим во вкладку Содержимое и вставляем код.

    <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>
    Скрытый текст

    04.png
    05.png

    Далее переходим в раздел Стили и шаблоны

    Скрытый текст

    06.png

    Добавляем в Custom.css следующий код

    /* Start FAQ Accordion Section */
    .faq-container {
      text-align: left;
      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;
    }
    .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 */
    Скрытый текст

    07.png

    Готово. Теперь добавляем наш созданный блок в нужное место.

    1. Заходим на главную страницу форума под админом.
    2. Переходим к Управлению блоками.
    Скрытый текст

    08.png
    09.png
    010.png
    011.png

    В результате мы получаем

    Скрытый текст

    012.gif

     

     Поделиться


    Отзывы пользователей

    Рекомендованные комментарии

    Нет комментариев для отображения



    Создайте аккаунт или войдите в него для комментирования

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать аккаунт

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас

×
×
  • Создать...
Вверх
Вверх