Я больше не прошу у вас денежку.

Просто почеши меня! =)
Главная :: Примеры HTML, Css, Js, Jq

Как сделать спойлер для сайта (Html, Css, jQuery)

Картинка

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

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

Как это выглядит:

Текст заголовка
Текст под спойлером.

Html код:

Вставляем его в то место, где у вам необходимо спрятать массивный текст.

<div class="spoil">
    <div class="sp_top">
        <span class="sp_span">Текст заголовка</span>
        <button class="sp_button">Развернуть</button>
    </div>

    <div class="sp_text">

        Текст или то, что душе угодно! =)

    </div>
</div>

JavaScript:

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

<script>
    $(document).ready(function () {
        $(document).on("click", ".sp_button", function () {
            spoyler(this);
        });
    });

    function spoyler(obj) {
        var spoil = $(obj).parent().parent(".spoil");
        var he = spoil.find(".sp_text").innerHeight() + 60;

        if (spoil.height() == 24) {
            $(obj).text("Свернуть");
            spoil.stop(true).animate({ height: he + "px" }, 200);
        } else {
            $(obj).text("Развернуть");
            spoil.stop(true).animate({ height: 24 + "px" }, 200);
        }
    }
</script>

Css:

<style type="text/css">
    .spoil {
        position: relative;
        overflow: hidden;
        background: url(img/nline.png);
        border: 1px solid #c3c3c3;
        border-left: 6px solid #c3c3c3;
        margin: 15px 0 15px 0;
        height: 24px;
    }

        .spoil .sp_text {
            margin: 40px 10px 10px 10px;
        }

        .spoil .sp_top {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 25px;
            background: rgba(195, 195, 195, 0.1);
            border-bottom: 1px solid #c3c3c3;
            display: table;
        }

        .spoil .sp_span {
            vertical-align: middle;
            display: table-cell;
            padding: 0 0 0 20px;
        }

        .spoil .sp_button {
            position: absolute;
            right: 2px;
            top: 2px;
            width: 100px;
            height: 20px;
            text-align: center;
            border: 1px solid #c3c3c3;
            background: #fff;
        }

            .spoil .sp_button:hover {
                box-shadow: inset 0 0 3px #ffd800;
            }
</style>

И, обещанный ранее, пример:

Скачать пример спойлера для сайта (Прямая ссылка, RAR архив)

68
Поделиться:
30167 17.04.2013 г.

Вместе с этой статьей читают:

Хрюшка - копилка, как сделать кнопку благодарности (Html, Css, jQuery)
Загрузить изображение на сервер через iframe без перезагрузки страницы (jq, php)
Яндекс.Метрика