Спойлер на чистом JavaScript

[Admin]

Сообщение было перенесено из темы Собственный спойлер с плавным открытием и скрытием содержимого

(07.09.2015 21:27:48)Юлия писал(а):Здравствуйте.
Надеюсь, вы поможете решить такую задачу. Есть очень длинная таблица. На устройствах с размером экрана меньше 550px таблицы первоначально видно быть не должно. Должна быть кнопка, при нажатии на которую должна раскрываться таблица. Как это реализовать?
<div id="open-modal" class="modal"> /* контейнер таблицы и кнопки */
<span class="tbl">Расписание »</span> /*сама кнопка*/
<div class="modalСontainer"> ... </div> /* код очень длинной таблицы*/
</div>
<style>
span.tbl {display:none;}
.modalСontainer {display:block;}
@media screen and (max-width: 550px) {
span.tbl {display:block;}
.modalСontainer {display:none;}

/* а как дальше?? hover не работает, да и не клик это, а наведение */
}
</style>

Подскажите новичку, пожалуйста...

[Admin]

Могу предложить только вариант с использованием JavaScript!

Достаточно просто в код кнопки добавить обработчик события onclick="open_sp(this);":

Код:

<span class="tbl" onclick="open_sp(this);">Расписание »</span>

И где-нибудь в конце странички JavaScript код:

Код:

<script type="text/javascript">
function next(e) {
    if ("nextElementSibling" in e) return e.nextElementSibling;
    while (e = e.nextSibling) if (e.nodeType === 1) return e;
    return null;
}

function open_sp(e){
    var e=next(e);
    if (e.className=="") e.className="modalContainer";
    else e.className="";
}
</script>

[Юлия]

Сделано, но не работает почему-то При уменьшении экрана меньше 550px, видны сразу и кнопка span.tbl и сама раскрытая таблица div.modalContainer
А нужно, чтобы первоначально была видна только кнопка. И сама длинная таблица раскрывалась по клику на кнопку, и ее можно было бы пролистывать на мобильном устройстве до конца.
Что еще можно сделать? Почему не хочет работать код?

[Admin]

Могу предположить, что проблема в CSS при определении мобильного устройства...

Вот рабочий пример без всего лишнего:

Код:

<div id="open-modal" class="modal">
<span class="tbl" onclick="open_sp(this);">Расписание »</span>
<div class="modalContainer"> Тут таблица ... </div>
</div>

<style>
span.tbl {display:none;}

@media only screen and (max-device-width: 480px) {
    span.tbl {display:block;}
    .modalContainer {display:none;}
}
}
</style>

<script type="text/javascript">
function next(e) {
    if ("nextElementSibling" in e) return e.nextElementSibling;
    while (e = e.nextSibling) if (e.nodeType === 1) return e;
    return null;
}

function open_sp(e){
    var e=next(e);
    if (e.className=="") e.className="modalContainer";
    else e.className="";
}
</script>

P.S. Если Вы проверяли простым уменьшением экрана меньше 550px, то тут может и не сработать. Нужно заходить именно с устройства с разрешением меньше 550px. Можете воспользоваться сайтом _http://www.mobilephoneemulator.com/

[Юлия]

Ура, большое спасибо! Все получилось!