Перейти к содержанию
IPS Invision Community 🇷🇺
  • Часто задаваемые вопросы (FAQ)

    Часто задаваемые вопросы (FAQ)

    Делаем блок с часто задаваемыми вопросами через штатное приложение 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

     

    Было ли это полезно?

    Sipsb

    Обратная связь

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

    Комментариев нет



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

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

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

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

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

    Войти

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

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