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

[Admin]

Данная тема создана в ответ на комментарий пользователя Мишка=) к теме Собственный спойлер с плавным открытием и скрытием содержимого, но сама модификация скрипта основана на скрипте из темы Обновленный скрипт спойлера с плавным открытием и скрытием содержимого

Суть модификации данного скрипта заключается в том, что между заголовком спойлера и его содержимым (телом) может располагаться какое угодно содержимое.

Привожу весь код целиком:

Код:

<style type="text/css">
.spoiler_body { display:none; font-style:italic; }
.spoiler_links { cursor:pointer; font-weight:bold; color:#009900; text-decoration:underline; }
</style>

<div class="spoiler_links">Спойлер №1 (кликните для открытия/закрытия)</div>

ЛЮБОЙ ДРУГОЙ ЭЛЕМЕНТ
<br>
<a href="http://usefulscript.ru/">http://usefulscript.ru/</a>
<br><br>44444444

<div class="spoiler_body">
Текст под спойлером<br>
имеет класс spoiler_body.<br>
Для придания стиля данному тексту<br>
просто добавьте еще один класс.
</div>

<div class="spoiler_links">Спойлер №2 (кликните для открытия/закрытия)</div>
<div class="spoiler_body">
А это уже текст второго спойлера!<br>
Данный спойлер также позволяет скрывать<br>
излишнее на сайте!
</div>

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
  $(this).nextAll('.spoiler_body:first').toggle('normal');
  return false;
});
});
</script>

[Admin]

Перенес с сайта комментарий от Мишка=)

(26.11.2014 21:19:45)Мишка=) писал(а):Можете более раскрыто залить в той теме код. Я правда запутался и чет как-то не получается. Второй споллер не открывается из того что вы залили. Заранее спасибо.

Про какую тему идет речь?

Код из первого сообщения данной ветки форума рабочий и второй спойлер прекрасно открывается. Пробовал в разных браузерах. Возможно, Вы скопировали не весь код целиком или не удалили до конца старый.

[miwgan]

(26.11.2014 21:47:39)Admin писал(а):  Перенес с сайта комментарий от Мишка=)

(26.11.2014 21:19:45)Мишка=) писал(а):Можете более раскрыто залить в той теме код. Я правда запутался и чет как-то не получается. Второй споллер не открывается из того что вы залили. Заранее спасибо.

Про какую тему идет речь?

Код из первого сообщения данной ветки форума рабочий и второй спойлер прекрасно открывается. Пробовал в разных браузерах. Возможно, Вы скопировали не весь код целиком или не удалили до конца старый.

У меня все равно не пашет(((( просто жмется но не выезжает((((

Код:

<br />
<br />

<table style="border-collapse:collapse;width:100%;" class="Zebra-Red-2">
    <tbody>
        <tr>
            <td class="fcalt" style="width: 46px;"><img src="templates/garant/img/stiralka.png" alt="" border="0" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;" /></td>
            <td class="alt" style="width: 182px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13px; line-height: normal; word-spacing: 0px;"><a href="index.php?do=static&amp;page=remont-stiralnyh-mashin" title="Ремонт стиральных машин" style="color: rgb(0, 0, 0);">РЕМОНТ СТИРАЛЬНЫХ МАШИН</a><br />
                    </span>              <img src="templates/garant/img/cena.png" alt="" border="0" style="margin: 0px; float: none; width: 150px;" title="" />            
            
    
        
                заголовок баннера
                              
              
              <span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13px; line-height: normal; word-spacing: 0px;"><br />
                    </span></td>
            <td class="alt" style="width: 46px;"><img src="templates/garant/img/posuda1.png" alt="" border="0" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;" /></td>
            <td class="alt" style="width: 0px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13px; line-height: normal; word-spacing: 0px;"><a href="index.php?do=static&amp;page=remont-posudomoechnyh-mashin" title="Ремонт посудомоечных машин" style="color: rgb(0, 0, 0);">РЕМОНТ ПОСУДОМОЕЧНЫХ МАШИН</a><br />
                    <img src="templates/garant/img/cena.png" alt="" border="0" title="" style="line-height: 20px; word-spacing: 1.10000002384186px; margin: 0px; float: none; width: 150px;" /><br />
                    </span></td>
        </tr>
        <tr>
            <td class="fc" style="width: 46px; background-color: rgb(255, 255, 255);">&nbsp;<img src="templates/garant/img/plita.png" alt="" border="0" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;" /></td>
            <td class="" style="width: 182px; background-color: rgb(255, 255, 255);"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13px; line-height: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);"><a href="index.php?do=static&amp;page=remont-elektricheskih-plit" title="Ремонт электрических плит" style="color: rgb(0, 0, 0);">РЕМОНТ ЭЛЕКТРИЧЕСКИХ ПЛИТ</a><br />
                    <img src="templates/garant/img/cena.png" alt="" border="0" title="" style="line-height: 20px; word-spacing: 1.10000002384186px; margin: 0px; float: none; width: 150px;" /><br />
                    </span></td>
            <td class="" style="width: 46px; background-color: rgb(255, 255, 255);"><img src="templates/garant/img/duxovka.png" alt="" border="0" style="margin: 0px; float: none; width: 140px;" title="" /></td>
            <td class="" style="width: 0px; background-color: rgb(255, 255, 255);"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13px; line-height: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);"><a href="index.php?do=static&amp;page=remont-duhovyh-shkafov" title="Ремонт духовых шкафов" style="color: rgb(0, 0, 0);">РЕМОНТ ДУХОВЫХ ШКАФОВ</a><br />
                    <img src="templates/garant/img/cena.png" alt="" border="0" title="" style="line-height: 20px; word-spacing: 1.10000002384186px; margin: 0px; float: none; width: 150px;" /><br />
                    </span></td>
        </tr>
    </tbody>
</table>
<section id="servicebox">                        </section>&lt;
текст баннера

И все равно не катит((((( в коде я вам написал где должен быть заголовок а где текст((((( спасибо за отзывчивость. если поможете решить эту проблему здорово выручите.

[Admin]

Конкретно в Вашем случае проблема заключается в том, что заголовок баннера располагается внутри таблицы, а текст баннера после нее. Тут скрипт придется менять. Завтра подумаю, а Вы опишите подробнее, сколько и каких спойлеров Вам надо и где и как они должны располагаться.

[miwgan]

Вместе текста заголовков будет картинка. ну и содержимое спойлеров в самом низу! Огромнейшие вам спасибо за отзывчивость и помощь с моими заморочками!

Код:

<br />
<br />

<table style="border-collapse:collapse;width:100%;" class="Zebra-Red-2">
    <tbody>
        <tr>
            <td class="fcalt" style="width: 46px;"><img src="templates/garant/img/stiralka.png" alt="" border="0" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;" /></td>
            <td class="alt" style="width: 182px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13px; line-height: normal; word-spacing: 0px;"><a href="index.php?do=static&amp;page=remont-stiralnyh-mashin" title="Ремонт стиральных машин" style="color: rgb(0, 0, 0);">РЕМОНТ СТИРАЛЬНЫХ МАШИН</a><br />
                    </span>
              
             Заголовок №1
              
              
              <span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13px; line-height: normal; word-spacing: 0px;"><br />
                    </span></td>
            <td class="alt" style="width: 46px;"><img src="templates/garant/img/posuda1.png" alt="" border="0" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;" /></td>
            <td class="alt" style="width: 0px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13px; line-height: normal; word-spacing: 0px;"><a href="index.php?do=static&amp;page=remont-posudomoechnyh-mashin" title="Ремонт посудомоечных машин" style="color: rgb(0, 0, 0);">РЕМОНТ ПОСУДОМОЕЧНЫХ МАШИН</a><br />
                    
              Заголовок№2
              
              <br />
                    </span></td>
        </tr>
        <tr>
            <td class="fc" style="width: 46px; background-color: rgb(255, 255, 255);">&nbsp;<img src="templates/garant/img/plita.png" alt="" border="0" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;" /></td>
            <td class="" style="width: 182px; background-color: rgb(255, 255, 255);"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13px; line-height: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);"><a href="index.php?do=static&amp;page=remont-elektricheskih-plit" title="Ремонт электрических плит" style="color: rgb(0, 0, 0);">РЕМОНТ ЭЛЕКТРИЧЕСКИХ ПЛИТ</a><br />
                    
       Заголовок№3
              
              <br />
                    </span></td>
            <td class="" style="width: 46px; background-color: rgb(255, 255, 255);"><img src="templates/garant/img/duxovka.png" alt="" border="0" style="margin: 0px; float: none; width: 140px;" title="" /></td>
            <td class="" style="width: 0px; background-color: rgb(255, 255, 255);"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13px; line-height: normal; word-spacing: 0px; background-color: rgb(255, 255, 255);"><a href="index.php?do=static&amp;page=remont-duhovyh-shkafov" title="Ремонт духовых шкафов" style="color: rgb(0, 0, 0);">РЕМОНТ ДУХОВЫХ ШКАФОВ</a><br />
              
                    Заголовок№4
              
              <br />
                    </span></td>
        </tr>
    </tbody>
</table>
<section id="servicebox">                        </section> содержимое спойлеров...

[Admin]

Еще нужно небольшое уточнение... Содержимое спойлеров должно выводиться на одном и том же месте для любого спойлера? Что должно быть, если прокликать все спойлеры по очереди? Должно быть видно содержимое всех спойлеров или только последнего, т.к. на него последним кликнули?

А пока Вы думаете, выложу свою версию...
Предлагаю скрипт, который одновременно будет позволять видеть содержимое только одного спойлера. При этом при клике по заголовку другого спойлера, содержимое первого будет скрываться, а второго - показываться.

Для этого Заголовок №1, Заголовок №2, Заголовок №3 и Заголовок №4 заменяем на:

Код:

<div class="spoiler_links" num="0">Заголовок №1</div>
<div class="spoiler_links" num="1">Заголовок №2</div>
<div class="spoiler_links" num="2">Заголовок №3</div>
<div class="spoiler_links" num="3">Заголовок №4</div>

Вместо содержимое спойлеров... добавляем:

Код:

<div class="spoiler_body">
Текст первого спойлера.
</div>

<div class="spoiler_body">
Текст второго спойлера.
</div>

<div class="spoiler_body">
Текст третьего спойлера.
</div>

<div class="spoiler_body">
Текст четвертого спойлера.
</div>

Ну и добавляем сам скрипт, который будет отвечать за открытие/закрытие нужных нам спойлеров:

Код:

<style type="text/css">
.spoiler_body { display:none; }
.spoiler_links { cursor:pointer; font-weight:bold; text-decoration:underline; }
</style>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
  num=$(this).attr("num");
  if ($('.spoiler_body').eq(num).css("display")=="none") {
    $('.spoiler_body').hide('normal');
    $('.spoiler_body').eq(num).toggle('normal');
  }
  else $('.spoiler_body').hide('normal');
  return false;
});
});
</script>

[miwgan]

Огромное спасибо, все получилось. Вот только один момент остался он при нажатие на спойлер отрывает его и сразу закрывает(((( а так все идеально. Как его так сказать довести до идеала. Я понимаю что поднадоел, но не чего не могу поделать.

А нет, все хорошо.... Это мой код сбивал ((((( спасибо админ.

[Admin]

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

Как ясно из названия, заголовки спойлеров можно размещать отдельно от содержимого спойлеров.