Как сделать спойлер в HTML

-USTAS-

-USTAS-

Постоялец
Регистрация
26 Май 2010
Сообщения
131
Реакции
4
Подскажите пожалуйста с вопросом спойлера
Есть такая страница:
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Если нажать на кнопочку "Показать" в "Меню блюд на выбор этой недели", Вы можете увидеть какое громоздкое получается меню на 2 дня. А нужно на всю не делю. У человека терпения не хватит его пролистать))
Поэтому решил сделать под данным спойлером еще 5: Пн, Вт, Ср, Чт, Пт
Т.е. человеку после нажатия на "Показать" открываюся еще 5 картинок с днями недели. нажимая на любую их них, открывается спойлер с меню на нужный день
Но вот проблема. Вставляя такой же спойлер в уже имеющийся получается кавардак.
Как решить эту проблему?
Очень прошу помощи, буду весьма признателен!
Спасибо!
 
К сожаленью указанный вами контент скрыт от меня, но думаю тут поможет простейший jquery скрипт.
Например: Для просмотра ссылки Войди или Зарегистрируйся

-USTAS- написал(а):
Уже контент открыт для Вас)))
Посмотрите пожалуйста что можно сделать
Спасибо!
Нажмите для раскрытия...

Ну очевидно же что вы не в ту сторону мыслите =)
В спойлере помещайте не 5 спойлеров, а закладки по дням недели.

Для просмотра ссылки Войди или Зарегистрируйся


А если не хотите возиться со скриптами то повесте простые якоря. =) старый добрый метод, а в верху ссылки к ним

-USTAS- написал(а):
не понял
Вы хотите сделать 5 ссылок на другие страницы?
Нажмите для раскрытия...

Нет, это у меня в сообщении ссылка глюканула и не туда ведет.
Смотрите что я предлагаю: Для просмотра ссылки Войди или Зарегистрируйся

Для каждого дня своя закладка, либо что бы избежать скриптов пользуетесь якорем: Для просмотра ссылки Войди или Зарегистрируйся
 
Ух ты! Супер!!!
Очень понравилась идея с закладками
Установил на страницу все отлично заработало
Но когда вместо текста вставил таблицы, начались косяки
Посмотрите пожалуйста, что не так?
Спасибо!
 
Очень неряшливо сверстано + есть ошибка, одна точно.
Переверстайте, <h6> вынесите преред таблицей, а не в ней или впишите в строку.
Провериьте правильно ли привязан скрипт к элементам. Проверьте зависимость блоков от ширины содержимого.

Как вариант переверстайте таблицу блоками.

UPD
Вообще капец как сверстано, ошибка на ошибке.
 
А можно я Вам эту страницу кину со стилями, а Вы попробуете исправить?
Сам мало что смыслю в этом
Пожалуйста!:ah:
 
Вам нужно связать соответствующие меню с днями недели.
У вас есть
HTML: 
div id="content">
<div id="tab1" style="display: block;"> </div>
</div>
tab1 это например ПН, в этот div вставляем меню на ПН
...
tab5 - ПТ.
 
Вам нужно только правильно сверстать ваши таблицы и вставить их в схему скрипта, а он предельно прост, скажу я вам.

HTML: 
<ul id="tabs">
    <li><a href="#" title="tab1">Пн</a></li>
    <li><a href="#" title="tab2">Вт</a></li>
    <li><a href="#" title="tab3">Ср</a></li>
    <li><a href="#" title="tab4">Чт</a></li>
    <li><a href="#" title="tab5">Пт</a></li> 
</ul>
 
<div id="content">
    <div id="tab1"> таблица ПН </div>
    <div id="tab2"> таблица ВТ </div>
    <div id="tab3"> таблица Ср </div>
    <div id="tab4"> таблица Чт </div>
    <div id="tab5"> таблица Пт</div>
</div>
 
<!-- Тут подключается скрипт и привязывается к блокам закладок -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
$(document).ready(function() {
    $("#content div").hide(); // Скрываем содержание
    $("#tabs li:first").attr("id","current"); // Активируем первую закладку
    $("#content div:first").fadeIn(); // Выводим содержание
   
    $('#tabs a').click(function(e) {
        e.preventDefault();       
        $("#content div").hide(); //Скрыть все сожержание
        $("#tabs li").attr("id",""); //Сброс ID
        $(this).parent().attr("id","current"); // Активируем закладку
        $('#' + $(this).attr('title')).fadeIn(); // Выводим содержание текущей закладки
    });
})();
</script>
<!-- END -->

Ну и плюс стили из примера подключите и выкиньте ненужное.
 
zek24 написал(а):
Вам нужно связать соответствующие меню с днями недели.
У вас есть
HTML: 
div id="content">
<div id="tab1" style="display: block;"> </div>
</div>
tab1 это например ПН, в этот div вставляем меню на ПН
...
tab5 - ПТ.
Нажмите для раскрытия...

Но ведь я точно так и сделал...
 
-USTAS- написал(а):
Но ведь я точно так и сделал...
Нажмите для раскрытия...

Не так. У вас:
HTML: 
    <div id="tab1"> таблица ПН </div>
    <div id="tab2"> таблица ВТ </div>
    <div id="tab3"> таблица Ср </div>
    <div id="tab4"> таблица Чт </div>
    <div id="tab5"> таблица Пт</div>

А надо:
HTML: 
<div id="content">
    <div id="tab1"> таблица ПН </div>
    <div id="tab2"> таблица ВТ </div>
    <div id="tab3"> таблица Ср </div>
    <div id="tab4"> таблица Чт </div>
    <div id="tab5"> таблица Пт</div>
</div>
 
Может Вы не там смотрите?..
Ну вот кусок кода со страницы:
HTML: 
<div id="content">
<div id="tab1">
<table width="100%" border="1" bordercolor="ab100e" cellpadding="0" cellspacing="0">
<h6>Комплексный обед «32»</h6>
 
<!------------------------------------------------
КОМПЛЕКСНЫЙ ОБЕД «32» "Понедельник"
-------------------------------------------------->
 
<tr bgcolor="ab100e"><th colspan=3>
<p class=d>Понедельник ДД.ММ.ГГГГ</p>
</th></tr>
<tr bgcolor="e9b43a">
<td align=center width="5">№<br />Комп.</td>
<td align=center>Блюдо</td>
<td align=center width="50">Вес, г</td>
</tr>
 
<!------------------------------------------------
КОМПЛЕКСНЫЙ ОБЕД «32» "Понедельник" "Комплекс 55"
-------------------------------------------------->
 
<tr bgcolor="f0d79f">
<TD ROWSPAN=4><p class=k>51</p></TD>
<td><p class=b>Ххххх, хххх, хххх ... ххх.</p></td>
<td><p class=v>ХХХ</p></td>
</tr>
<tr bgcolor="f0d79f">
<td><p class=b>Ххххх, хххх, хххх ... ххх.</p></td>
<td><p class=v>ХХХ</p></td>
</tr>
<tr bgcolor="f0d79f">
<td><p class=b>Ххххх, хххх, хххх ... ххх.</p></td>
<td><p class=v>ХХХ</p></td>
</tr>
<tr bgcolor="f0d79f">
<td><p class=b>Ххххх, хххх, хххх ... ххх.</p></td>
<td><p class=v>ХХХ</p></td>
</tr>
</table>
</div>
<div id="tab2">
<table width="100%" border="1" bordercolor="ab100e" cellpadding="0" cellspacing="0">
<h6>Комплексный обед «32»</h6>
 
<!------------------------------------------------
КОМПЛЕКСНЫЙ ОБЕД «32» "Понедельник"
-------------------------------------------------->
 
<tr bgcolor="ab100e"><th colspan=3>
<p class=d>Вторник ДД.ММ.ГГГГ</p>
</th></tr>
<tr bgcolor="e9b43a">
<td align=center width="5">№<br />Комп.</td>
<td align=center>Блюдо</td>
<td align=center width="50">Вес, г</td>
</tr>
 
<!------------------------------------------------
КОМПЛЕКСНЫЙ ОБЕД «32» "Понедельник" "Комплекс 55"
-------------------------------------------------->
 
<tr bgcolor="f0d79f">
<TD ROWSPAN=4><p class=k>51</p></TD>
<td><p class=b>Ххххх, хххх, хххх ... ххх.</p></td>
<td><p class=v>ХХХ</p></td>
</tr>
<tr bgcolor="f0d79f">
<td><p class=b>Ххххх, хххх, хххх ... ххх.</p></td>
<td><p class=v>ХХХ</p></td>
</tr>
<tr bgcolor="f0d79f">
<td><p class=b>Ххххх, хххх, хххх ... ххх.</p></td>
<td><p class=v>ХХХ</p></td>
</tr>
<tr bgcolor="f0d79f">
<td><p class=b>Ххххх, хххх, хххх ... ххх.</p></td>
<td><p class=v>ХХХ</p></td>
</tr>
</table>>
</div>

Вроде все как вы подсказали сделано
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху