Как сделать спойлер для сайта (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 архив)

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