Не работает спойлер - HTML и CSS

dittor · 07.10.2019, 23:12

Доброго всем времени суток!
На просторах интернета нашел код сполера:

Код:


	Код 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>, но могу и ошибаться
Таких сполеров на странице должно быть неограниченное количество. И все они должны открываться и закрываться не зависимо друг от друга. Помогите разобраться - где я ошибся.

Serge_Bliznykov · 08.10.2019, 10:23

этот код 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>

dittor · 08.10.2019, 15:36

спасибо, помогло.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
QUdpSocket работает только при локальном IP. Не работает если указан динамичесский айпи	kook163	Qt и кроссплатформенное программирование С/С++	5	09.05.2018 22: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 09:59

08.10.2019, 15:36	#3
dittor Регистрация: 07.10.2019 Сообщений: 5	спасибо, помогло.