Раскрывающийся список

В системе управления UralCMS реализовано множество различных функций для работы с содержимым разделов - тексты, изображения, ссылки, таблицы и так далее. Среди прочего, также доступен функционал для создания раскрывающихся блоков в тексте раздела.

Раскрывающийся блок может содержать в себе любую информацию: текст, картинки, таблицы и так далее. Таким образом, воспользовавшись данным инструментов у Вас получиться оформить разделы более функционально и интересно.

Создание раскрывающегося блока

Чтобы разместить в раздела раскрывающийся блок - перейдите в редактирование содержимого раздела, далее, разместите ту информацию (блоки, списки, таблицы, ссылки и т.д.), которая будет раскрываться по специальной ссылке.

Как это работает

Например, Вы хотите разместить в карточке товара в интернет-магазине таблицу размеров доступную лишь специальной ссылке, чтобы это блок не влиял на восприятие подробной информации о позиции.

Вам нужно:

  • подобрать текст, который будет являться ссылкой/заголовком раскрывающегося блока
  • разместить информацию - текст и таблицу со значениями.

Таким образом, у Вас должно получиться, например:

Текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания

Таблица размеров

Россий-
ский размер

Между-
народ-
ный размер

Обхват груди (см)

Обхват талии (см)

Обхват бедер (см)

Длина рукава (см)

44

M

88

70

96

60/62

46

M

92

74

100

60/62

48

L

96

78

104

60/62

50

L

100

82

108

61/63

Текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания


Далее, с помощью определенных действий Вы можете получить следующий вариант вывода на сайте:

Текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания

Таблица размеров (нажмите для действия)

Россий-
ский размер

Между-
народ-
ный размер

Обхват груди (см)

Обхват талии (см)

Обхват бедер (см)

Длина рукава (см)

44

M

88

70

96

60/62

46

M

92

74

100

60/62

48

L

96

78

104

60/62

50

L

100

82

108

61/63

Текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания


Как это сделать в редакторе

Конструкция в виде HTML для формирования данной функции (развертывание/сертывание по клику):

<div class="l-toggle">
<div class="lt-caption" style="cursor: pointer;">Заголовок блока</div>
<div class="lt-content">Разворачивающийся блок</div>
</div>

После того, как вы уже разместили необходимую информацию, которая будете раскрываться по клику в тексте раздела, необходимо перейти в редактирование HTML-кода страницы. Для этого, в панели инструментов визуального редактора выберите инструмент «Редактировать HTML-код»

Редактировать HTML-код

Для справки:

Теги, которыми размечается документ для корректного отображения в браузере.

  • Абзац: <p>...</p>
  • Таблица: <table>...</table>
  • Список: <ul>...</ul>
  • Заголовок: <h1>....</h1> // (h2,h3,h4...)

Конечно, тегов гораздо больше, однако, скорее всего, вы встретите в основном те, что указаны.

После перехода к HTML-коду страницы Вам необходимо найти тот блок, что необходимо скрывать (рассматриваем вариант на примере выше, с таблицей размеров):

HTML-код

Описание

<p>Текст описания, текст описания ..... </p>

<p><strong>Таблица размеров</strong></p>

<table>
<tbody>
<tr>
<td>

----------//----------//----------//----------

</td>
</tr>
</tbody>
</table>

<p>Текст описания, текст описания ..... </p>

- текст до блока, который будем раскрывать

- заголовок блока - ссылка-действие

- начало таблицы



- содержимое таблицы




- конец таблицы

- текст после блока, который будем раскрывать

Далее, используя конструкцию для формирования раскрывающегося блока добавляе в код теги, чтобы получилось:

HTML-код Описание

<p>Текст описания, текст описания ..... </p>

<div class="l-toggle">

<div class="lt-caption" style="cursor: pointer;">
    <p><strong>Таблица размеров</strong></p>
</div>

<div class="lt-content">
    <table>
    <tbody>
    <tr>
    <td>

    ----------//----------//----------//----------

    </td>
    </tr>
    </tbody>
    </table>
</div>

</div>

<p>Текст описания, текст описания ..... </p>

- текст до блока, который будем раскрывать

- начало раскрывающегося блока

- указание на заголовок блока - ссылка (начало)
-     заголовок блока - ссылка-действие
- указание на заголовок блока - ссылка (конец)

- начало блока, который раскрывается по ссылке
-     начало таблицы



-     содержимое таблицы




-     конец таблицы
- конец блока, который раскрывается по ссылке

- конец раскрывающегося блока

- текст после блока, который будем раскрывать

Таким образом, расставив в HTML необходимый код, Вы сможете создать раскрывающийся списк из примера выше.

После того, как код вставлен в нужные места, нажмите кнопку «Обновить», затем сохраните страницу.

Примеры раскрывающихся блоков

Несколько примеров-вариаций, как можно использовать на сайте раскрывающиеся блоки.


Пример 1. (Список)

Заголовок списка

  • Первый пункт списка с длинным описанием
  • Второй пункт списка с длинным описанием
  • Третий пункт списка, без описания
  • Четвертый пункт списка

Пример 2. (Таблица)

Заголовок таблицы

Название Значение 1 Значение 2 Значение 3
Название пункта 1 0 1 2
Название пункта 2 3 4 5


Пример 3. (Картинка + текст)

Заголовок блока

Текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания, текст описания.

Рекомендации Управление структурой
Настройки сайта Интерактивные сервисы Заказы и сообщения

Новости

Быстрая навигация

Видео-обзор системы управления

Обработка персональных данных на сайте в соответствии со 152-ФЗ

Реализован инструментарий для возможности информирования пользователей об обработке передаваемых персональных данных через формы обратной связи.

Оформление чеков при онлайн-оплате в соответствии с 54-ФЗ

Для пользователей эквайринга от Яндекс.Касса и Сбербанк реализован механизм отправки чеков в ФНС и покупателю через интернет.

Смотреть все новости Подписаться на новости