Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
-- Купить пыльцу --

Раскрывающиеся блоки для подсказок или дополнительной информации

Здравствуйте уважаемые начинающие веб мастера.

Очень часто возникает необходимость разместить на странице подсказку или дополнительную информацию к какому либо слову, словосочетанию или абзацу.

Делать это открытым текстом не всегда удобно, так как возможно будет теряться основная нить статьи, поэтому в таком случае лучше будет применить скрытый текст открывающийся по клику мыши.

Объектом для клика может быть выделенная часть текста или кнопка "Справка" размещёная в удобном месте.

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

При повторном клике на выделенный текст или кнопку, вкладка с подсказкой закроется.

Примеры:

1. Выделенная часть текста.

Бла-бла-бла-бла-бла бла-бла-бла-бла-бла

Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла

 
Код:

Html

<div class="spravca">Бла-бла-бла-бла-бла-бла <input type="checkbox" id="hd-1" class="reference"/>
<label for="hd-1" >Справка</label> бла-бла-бла-бла-бла-бла
<span class="story">
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
</span>
<div>

Css

.reference {
display: none;
}
.reference ~ .story {
display: none;
}
.reference + label {
font-size: 16px;
padding: 0;
color: green;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}

2. Кнопка, которую можно разместить в любой части контента.

Бла-бла-бла-бла-бла бла-бла-бла-бла-бла

Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла

 
Код:

Html тот-же что и в первом примере.

Css

.reference {
display: none;
}
.reference ~ .story{
display: none;
}
.reference + label {
position: absolute;
top: 0;
left: 200px;
border: 1px solid #333;
border-radius: 4px;
background: #F0FFF0;
padding: 3px;
color: green;
font-size: 16px;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}
.spravca {
position: relative;
}

Можно дополнительно оформить раскрывающиеся блоки в css под стиль вашего сайта.

В HTML5 похожая опция заложена по умолчанию.

Реализуется она тегами

1. <details></details> — контейнер, который можно развернуть и свернуть.

2. <summary></summary> — заголовок, по которому можно щёлкнуть, чтоб развернуть контейнер. Повторный щелчёк сворачивает контейнер.

Смотрится и работает эта опция так:

Заголовок

текст текст текст текст

 

Код:


<details>
<summary>Заголовок</summary>
текст текст текст текст
</details>

Теги details и summary по умолчанию блочные элементы, поэтому, если нужно вставить контейнер в строку, ему нужно будет задать свойство display: inline-block;

Можно так же задать и другое стилевое оформление.

Желаю творческих успехов.

В раздел >>>

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.
А так же:

6 комментариев на «Раскрывающиеся блоки для подсказок или дополнительной информации»

  1. stariс говорит:

    Чтоб точно понять, мне нужно видеть весь ваш код. Например, у меня нет класса .spoiler. Если у вас это замена моего .reference, то чтоб его открыть, нужно обязательно в селектор добавить + label, где плюс через пробелы.
    Напишите мне весь ваш код, и html и css, тогда я найду ошибку.
    Только, когда будете писать код в комментарии, замените угловые скобки в html на спецсимволы. Вместо открывающих скобок поставьте спецсимвол &lt; а вместо закрывающих скобок спецсимвол &gt;. Иначе браузер не отобразит, так как будет воспринимать угловые скобки как тег.

  2. Наталья говорит:

    Добрый день! Помогите, пожалуйста, не понимаю, где ошибка, уже кучу вариантов перепробовала, но не встает в строку раскрывающийся текст:

    Мы ценим каждого покупателя!

    Добро пожаловать в MrShop24!

    .spoiler {
    display: inline-block !important;
    }

  3. stariс говорит:

    Какую-то мелочь упустили (скобка, точ. с запятой и т.п.).

  4. Наталья говорит:

    Не получилось сделать выпадающий в строку контейнер. Не понимаю, но почему-то inline-block не сработал

  5. stariс говорит:

    А что она должна открыть? HTML то одинаковый.

    Поменяйте названия всех классов и в HTML и в CSS, и тогда будет открываться то, что вы напишите.

  6. Кирилл Александрович говорит:

    создаю 2 кнопку, она открывает 1 блок. что изменить в коде?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *