Каскадный режим | Линейный режим

rubinzon · 06.06.2016 16:18:20

Подскажите пожалуйста! Как сделать так чтобы содержимое спойлера в закрытом состоянии не проигрывалось?

Код:

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Language" content="ru" />

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>SinFx.ru</title>

    <meta name="description" content="" />

    <meta name="keywords" content="" />

    <meta name="author" content="SinFх" />

    <link rel="stylesheet" type="text/css" href="_Spoiler.css">

    <script src="jquery-1.8.2.min.js"></script>

    <script src="_Spoiler.js"></script>

</head>

<body>

    <div class="spoil">

        <div class="sp_top">

            <span class="sp_span">Автотуристик Растяжка 1230х80</span>

            <button class="sp_button">Развернуть</button>

        </div>

        <div class="sp_text">

            <iframe id="banner1230x80" src="http://kipras.info/demonstration_page/baners/avtoturistik/index.html" allowfullscreen="allowfullscreen"></iframe>

        </div>

    </div>

</body>

</html>

Sergey1917 · 04.04.2020 11:42:07

Нашел очень интересный спойлер. Работает без всяких подключений из вне - вставил на страницу HTML и все.

Код:

<!-- Spoiler - начало -->

  <div class="spoil"><div class="smallfont"><input type="button" value="Нажмите, чтобы открыть или закрыть" class="input-button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Закрыть спойлер'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Открыть спойлер'; }"/>

  </div>

    <div class="alt2"><div style="display: none;">

777

    </div>

  <!-- Spoiler - конец -->

Можно и стили CSS подключить:

Код:

alt2 { margin: 0px;  padding: 6px;  border: 1px inset; }

smallfont { margin-bottom: 2px; }

spoil { margin: 10px; margin-top: 5px; }

Работает и без них. Можно ставить сколько угодно на страницу. Работает во всех браузерах (в 4-х проверил).

Не могу сделать его изначально открытым. Может вы разберетесь как это сделать?

***Admin*** · 06.04.2020 12:09:59

Запросто. Достаточно удалить style="display: none;"
Даже код удалось немного сократить:

Код:

<!-- Spoiler - начало -->

 <div class="spoil">

  <div class="smallfont">

    <input type="button" value="Закрыть спойлер" onclick=" x = this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0]; if (x.style.display != '') { x.style.display = ''; this.value = 'Закрыть спойлер'; } else { x.style.display = 'none'; this.value = 'Открыть спойлер'; }">

  </div>

  <div class="alt2">

   <div>

    777

   </div>

  </div>

 </div>

<!-- Spoiler - конец -->

Sergey1917 · 06.04.2020 14:35:59

(06.04.2020 12:09:59)Admin писал(а): Запросто. Достаточно удалить style="display: none;"
Даже код удалось немного сократить:

Отлично получилось. Теперь вот мучаюсь со стилями. Не получается подобрать как на скрине (прилагаю). Если не затруднит, может подскажете?

Sergey1917 · 08.04.2020 17:45:48

"Даже код удалось немного сократить..."

А в закрытом варианте спойлера код то же можно сократить?

Каскадный режим \| Линейный режим Еще один пример спойлера с плавным открытием и закрытием на jquery
Автор	Сообщение