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

Тема в разделе "Верстка", создана пользователем -USTAS-, 29 авг 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. -USTAS-

    -USTAS- Постоялец

    Регистр.:
    26 май 2010
    Сообщения:
    131
    Симпатии:
    4
    Подскажите пожалуйста с вопросом спойлера
    Есть такая страница:
    http://kordelia.kiev.ua/333.htm
    Если нажать на кнопочку "Показать" в "Меню блюд на выбор этой недели", Вы можете увидеть какое громоздкое получается меню на 2 дня. А нужно на всю не делю. У человека терпения не хватит его пролистать))
    Поэтому решил сделать под данным спойлером еще 5: Пн, Вт, Ср, Чт, Пт
    Т.е. человеку после нажатия на "Показать" открываюся еще 5 картинок с днями недели. нажимая на любую их них, открывается спойлер с меню на нужный день
    Но вот проблема. Вставляя такой же спойлер в уже имеющийся получается кавардак.
    Как решить эту проблему?
    Очень прошу помощи, буду весьма признателен!
    Спасибо!
     
  2. Nonsleep

    Nonsleep Создатель

    Регистр.:
    7 авг 2012
    Сообщения:
    24
    Симпатии:
    4
    К сожаленью указанный вами контент скрыт от меня, но думаю тут поможет простейший jquery скрипт.


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

    http://ruseller.com/lessons.php?rub=2&id=1374


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

    Нет, это у меня в сообщении ссылка глюканула и не туда ведет.
    Смотрите что я предлагаю: http://ruseller.com/lessons/les1374/demo/index.html

    Для каждого дня своя закладка, либо что бы избежать скриптов пользуетесь якорем: http://htmlbook.ru/samhtml/yakorya
     
    sarhov нравится это.
  3. -USTAS-

    -USTAS- Постоялец

    Регистр.:
    26 май 2010
    Сообщения:
    131
    Симпатии:
    4
    Ух ты! Супер!!!
    Очень понравилась идея с закладками
    Установил на страницу все отлично заработало
    Но когда вместо текста вставил таблицы, начались косяки
    Посмотрите пожалуйста, что не так?
    Спасибо!
     
  4. Nonsleep

    Nonsleep Создатель

    Регистр.:
    7 авг 2012
    Сообщения:
    24
    Симпатии:
    4
    Очень неряшливо сверстано + есть ошибка, одна точно.
    Переверстайте, <h6> вынесите преред таблицей, а не в ней или впишите в строку.
    Провериьте правильно ли привязан скрипт к элементам. Проверьте зависимость блоков от ширины содержимого.

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

    UPD
    Вообще капец как сверстано, ошибка на ошибке.
     
    sarhov нравится это.
  5. -USTAS-

    -USTAS- Постоялец

    Регистр.:
    26 май 2010
    Сообщения:
    131
    Симпатии:
    4
    А можно я Вам эту страницу кину со стилями, а Вы попробуете исправить?
    Сам мало что смыслю в этом
    Пожалуйста!:ah:
     
  6. zek24

    zek24

    Moderator
    Регистр.:
    14 ноя 2009
    Сообщения:
    780
    Симпатии:
    238
    Вам нужно связать соответствующие меню с днями недели.
    У вас есть
    HTML:
    div id="content">
    <div id="tab1" style="display: block;"> </div>
    </div>
    
    tab1 это например ПН, в этот div вставляем меню на ПН
    ...
    tab5 - ПТ.
     
  7. Nonsleep

    Nonsleep Создатель

    Регистр.:
    7 авг 2012
    Сообщения:
    24
    Симпатии:
    4
    Вам нужно только правильно сверстать ваши таблицы и вставить их в схему скрипта, а он предельно прост, скажу я вам.

    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 -->
    
    Ну и плюс стили из примера подключите и выкиньте ненужное.
     
  8. -USTAS-

    -USTAS- Постоялец

    Регистр.:
    26 май 2010
    Сообщения:
    131
    Симпатии:
    4
    Но ведь я точно так и сделал...
     
  9. Nonsleep

    Nonsleep Создатель

    Регистр.:
    7 авг 2012
    Сообщения:
    24
    Симпатии:
    4
    Не так. У вас:
    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>
     
  10. -USTAS-

    -USTAS- Постоялец

    Регистр.:
    26 май 2010
    Сообщения:
    131
    Симпатии:
    4
    Может Вы не там смотрите?..
    Ну вот кусок кода со страницы:
    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>
    
    Вроде все как вы подсказали сделано