Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

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

Доброго всем времени суток!
На просторах интернета нашел код сполера:
Код:
Код 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, 10:23   #2
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

этот код 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, 15:36   #3
dittor
 
Регистрация: 07.10.2019
Сообщений: 5
По умолчанию

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


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
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