Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 25 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 08.10.2019, 00:12   #1
dittor
 
Регистрация: 07.10.2019
Сообщений: 5
Репутация: 10
По умолчанию Не работает спойлер

Доброго всем времени суток!
На просторах интернета нашел код сполера:
Код:
Код HTML:
<input type="checkbox" id="spoiler2" /> 
 <label for="spoiler2" >Spoiler</label>
<div class="spoiler">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu sodales tortor, posuere mattis nunc. Integer eget sapien ullamcorper diam mollis laoreet. Praesent dignissim id urna at malesuada. Etiam id nisl vitae ante vestibulum volutpat. 
 <br><br>
 Etiam congue, neque a commodo iaculis, nisl massa varius felis, eget commodo eros mauris vitae felis. Pellentesque sed nisi bibendum, faucibus lectus id, varius metus. Vestibulum lacinia vehicula justo, ut molestie magna tincidunt nec. Suspendisse sit amet sagittis enim.
</div>
<p style="text-align:center;">Contenido normal intercalado sin spoiler</p>
 <input type="checkbox" id="spoiler" /> 
 <label for="spoiler">Spoiler</label>
<div class="spoiler">
 Una forma de esconder cierta informaciГіn hasta que el usuario hace clic para visualizarla. Una forma de esconder cierta informaciГіn hasta que el usuario hace clic para visualizarla.
 <br><br>
 <img style="display:block;margin: 0 auto;" src="https://f.usemind.org/img/5/NeedFull.NET_stikh-projdjot-let-desyat-mozhet-byt-pyatnadtsat.jpg"/>
</div>
<p style="text-align:center;">Contenido normal intercalado sin spoiler</p>
[CSS] input[id^="spoiler"]{ display: none; } input[id^="spoiler"] + label { display: block; width: 200px; margin: 0 auto; padding: 5px 20px; background: #e1a; color: #fff; text-align: center; font-size: 24px; border-radius: 8px; cursor: pointer; transition: all .6s; } input[id^="spoiler"]:checked + label { color: #333; background: #ccc; } input[id^="spoiler"] ~ .spoiler { width: 90%; height: 0; overflow: hidden; opacity: 0; margin: 10px auto 0; padding: 10px; background: #eee; border: 1px solid #ccc; border-radius: 8px; transition: all .6s; } input[id^="spoiler"]:checked + label + .spoiler{ height: auto; opacity: 1; padding: 10px; } [/CSS]
взял его отсюда:
https://inverser.pro/47-simple-spoiler
(второй пример)
Lоработал стилистику под свои нужды и вставил свой основной код. Вот тут и появилась проблема. Второй и последующие сполеры не хотят работать без открытого первого сполера. Хотя болванки (переработанные исходники) прекрасно работают.
Вот сам код:
Код:
[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content Type" content="text/html; charset=utf-8">
        <title>пробник</title>
        <style type="text/css">
        
            input[id^="spoiler"]{display: none}
            
            input[id^="spoiler"] + label {display: block; color: black; font-size: 24px;}
             
            input[id^="spoiler"]:checked + label {color: blue;}
            
            input[id^="spoiler"] ~ .spoiler{opacity: 0;height: 0; transition: all .4s}
             
            input[id^="spoiler"]:checked + label + .spoiler{ height: auto; opacity: 1}
             
            table{width: 80%; background-color: #FFFFFF; font-family: calibri, Times New Roman, Arial,; font-size: 18px;}
            table tr td{text-align: left}
            table tr td+td{text-align: center}
            table tr td+td+td+td{text-align: right; background-color: #FFCC00}
            #stl{text-align: center; background-color: #33CC66}
            #stl1{text-align: center; background-color: #00CC99}
             
        </style>
            
    </head>
    <body>
    
        <input type="checkbox" id="spoiler"> 
         <label for="spoiler" >
            <table border="1" align="center">
                <tr>
                    <td id="stl1" colspan="5">цена на билет</td>
                </tr>
            </table>
        </label>
        <div class="spoiler">
         <table border="1" align="center">  
            <tr>
                <td>автобус</td> <td>п/м</td> <td>65,00</td> <td>00</td> <td>00</td>
            </tr>
            <tr>
                <td>троллейбус</td> <td>п/м</td> <td>80,00</td> <td>00</td> <td>00</td>
            </tr>
            <tr>
                <td>трамвай</td> <td>п/м</td> <td>65,00</td> <td>00</td> <td>00</td>
            </tr>
            <tr>
                <td>такси</td> <td>п/м</td> <td>50,00</td> <td>00</td> <td>00</td>
            </tr>   
            <tr>
                <td>рикша</td> <td>п/м</td> <td>200,00</td> <td>00</td> <td>00</td>
            </tr>
         </table>
        </div>
        
        <input type="checkbox" id="spoiler9"> 
         <label for="spoiler9" >
            <table border="1" align="center">
                <tr>
                    <td id="stl1" colspan="5">ремонт транспорта</td>
                </tr>
            </table>
         </label>
        <div class="spoiler">
         ТЕЛО СПОЛЕРА 
        </div>
 
        <input type="checkbox" id="spoiler1"> 
         <label for="spoiler1" >Spoiler</label>
        <div class="spoiler">
         ТЕЛО СПОЛЕРА 1
        </div>
    
        <input type="checkbox" id="spoiler2"> 
         <label for="spoiler2" >Spoiler</label>
        <div class="spoiler">
         ТЕЛО СПОЛЕРА 2
        </div>
        
    </body>
</html>
Dчем подвох понять не могу. Подозреваю. что что- то с CSS <table>, но могу и ошибаться
Таких сполеров на странице должно быть неограниченное количество. И все они должны открываться и закрываться не зависимо друг от друга. Помогите разобраться - где я ошибся.
dittor вне форума   Ответить с цитированием
Старый 08.10.2019, 11:23   #2
Serge_Bliznykov
МегаМодератор
СуперМодератор
 
Регистрация: 09.01.2008
Сообщений: 26,055
Репутация: 5656
По умолчанию

этот код CSS за пределами моей квалификации!

а если так попробовать?

Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content Type" content="text/html; charset=utf-8">
        <title>пробник</title>
<style>
input[id^="spoiler"]{
 display: none;
}
input[id^="spoiler"] + label {
 display: block;
 margin: 0 auto;
 cursor: pointer;
 transition: all .6s;
}
input[id^="spoiler"]:checked + label {
 color: #333;
}
input[id^="spoiler"] ~ .spoiler {
 width: 90%;
 height: 0;
 overflow: hidden;
 opacity: 0;
 margin: 10px auto 0; 
 padding: 10px; 
 background: #eee;
 border: 1px solid #ccc;
 border-radius: 8px;
 transition: all .6s;
}
input[id^="spoiler"]:checked + label + .spoiler{
 height: auto;
 opacity: 1;
 padding: 10px;
}
table{width: 80%; background-color: #FFFFFF; font-family: calibri, Times New Roman, Arial,; font-size: 18px;}
table tr td{text-align: left}
table tr td+td{text-align: center}
table tr td+td+td+td{text-align: right; background-color: #FFCC00}
#stl{text-align: center; background-color: #33CC66}
#stl1{text-align: center; background-color: #00CC99}
</style>

    </head>
    <body>
    
        <input type="checkbox" id="spoiler"> 
         <label for="spoiler" >
            <table border="1" align="center">
                <tr>
                    <td id="stl1" colspan="5">цена на билет</td>
                </tr>
            </table>
        </label>
        <div class="spoiler">
         <table border="1" align="center">  
            <tr>
                <td>автобус</td> <td>п/м</td> <td>65,00</td> <td>00</td> <td>00</td>
            </tr>
            <tr>
                <td>троллейбус</td> <td>п/м</td> <td>80,00</td> <td>00</td> <td>00</td>
            </tr>
            <tr>
                <td>трамвай</td> <td>п/м</td> <td>65,00</td> <td>00</td> <td>00</td>
            </tr>
            <tr>
                <td>такси</td> <td>п/м</td> <td>50,00</td> <td>00</td> <td>00</td>
            </tr>   
            <tr>
                <td>рикша</td> <td>п/м</td> <td>200,00</td> <td>00</td> <td>00</td>
            </tr>
         </table>
        </div>
        
        <input type="checkbox" id="spoiler9"> 
         <label for="spoiler9" >
            <table border="1" align="center">
                <tr>
                    <td id="stl1" colspan="5">ремонт транспорта</td>
                </tr>
            </table>
         </label>
        <div class="spoiler">
         ТЕЛО СПОЛЕРА 
        </div>
 
        <input type="checkbox" id="spoiler1"> 
         <label for="spoiler1" >Spoiler</label>
        <div class="spoiler">
         ТЕЛО СПОЛЕРА 1
        </div>
    
        <input type="checkbox" id="spoiler2"> 
         <label for="spoiler2" >Spoiler</label>
        <div class="spoiler">
         ТЕЛО СПОЛЕРА 2
        </div>
        
    </body>
</html>
Serge_Bliznykov вне форума   Ответить с цитированием
Старый 08.10.2019, 16:36   #3
dittor
 
Регистрация: 07.10.2019
Сообщений: 5
Репутация: 10
По умолчанию

спасибо, помогло.
dittor вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
QUdpSocket работает только при локальном IP. Не работает если указан динамичесский айпи kook163 Qt и кроссплатформенное программирование С/С++ 5 09.05.2018 23:40
Спойлер с памятью limon142 JavaScript, Ajax 1 26.01.2014 16:38
Программа на Visual C# работает при запуске руками, но не работает при попытки автоматического запуска Bug$ Помощь студентам 18 21.10.2013 16:22
не работает relese версия проги и debug работает тока на моем компе D][mon C# (си шарп) 2 04.05.2012 20:21
Поиск компонента GroupBox с эффектом "спойлер" XerSon Компоненты Delphi 1 24.03.2011 10:59


09:49.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.