Добрый подскажите код spoiler ✓ ЕСТЬ ОТВЕТ

Здесь обсуждается форумный движок phpBB различных версий. В дальнейшем, если понадобится, форум будет вынесен в отдельный подраздел и разбит на категории.
Ответить
Аватара пользователя

Автор темы
KISS_ARMY
Постоянный пользователь
Сообщения: 67
Зарегистрирован: 15 окт 2015, 06:03
Есть ответ: 4
Репутация: 2
Контактная информация:
Статус: Не в сети

Добрый подскажите код spoiler

Сообщение KISS_ARMY » 19 окт 2015, 20:23


Очень нравится spoiler который стоит тут подскажите его код

ЛУЧШИЙ ОТВЕТ DesignerMix » 19 окт 2015, 20:34
Этот спойлер делал я сам на основе спойлера с рутрекера и из-за этого код совсем некрасивый, но рабочий. Ссылки на картинки плюса и минуса смените на ваши.

Примеры:

Код: Выделить всё

[spoiler={TEXT1}]{TEXT2}[/spoiler]


Замена HTML:

Код: Выделить всё

<div style="padding: 10px 0px 5px 0px;"><!--spoiler-wrap-->
  <div style="
     width: 97%;
   margin-right: 6px;
   clear: both;
   background: rgb(244, 246, 251);
   border: solid rgb(204, 204, 255);
   border-width: 1px 1px 1px 1px;
   font: 12px Verdana,Arial,sans-serif;">
    <div style="
      font-size: 11px;
   padding: 3px 3px 3px 15px;
   line-height: 15px;
   font-weight: bold;
   background: #F5E3D1;
padding-left: 6px;
   background-color: #FFF9EF;
      cursor: pointer;"
     onclick="
     hidn = this.parentNode.getElementsByTagName('div')[1];
     btn = this.getElementsByTagName('img')[0];
     if (hidn.style.display != '') { hidn.style.display = '';
     orimg = btn.src; btn.src = 'styles/se_square_left/theme/images/minus.gif'; } else {

hidn.style.display = 'none';
     btn.src = orimg; }">
   <img style="margin: 0; padding: 2px 2px 0;" src="styles/se_square_left/theme/images/plus.gif" />
    
 {TEXT1}
    
     </div>
      <!--spoiler-body-->
        <div style="line-height: 20px;
      padding: 10px 10px 10px 15px;
    display: none;
   border-top: 1px solid rgb(255, 255, 255);
   border-bottom: 0px solid rgb(255, 255, 255);
   border-left: 0px solid rgb(255, 255, 255);
   border-right: 0px solid rgb(255, 255, 255);
   background: rgb(244, 246, 251);
   border-style: solid;
    border-top-style: solid;
    border-right-style-value: solid;
    border-bottom-style: solid;
    border-left-style-value: solid;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
   border-color: #C3CBD1;
    border-top-color: #C3CBD1;
    border-right-color-value: #C3CBD1;
    border-bottom-color: #C3CBD1;
-moz-border-top-colors: none;
-moz-border-bottom-colors: none;">

{TEXT2}

</div>
      <!--/spoiler-body-->
  </div>
<!--/spoiler-wrap-->
</div>



Пример спойлера
Текст в спойлере

ПЕРЕЙТИ К ПОЛНОМУ СООБЩЕНИЮ ➙

Теги:

Аватара пользователя

DesignerMix
Администратор
Администратор
Сообщения: 4448
Зарегистрирован: 25 апр 2014, 10:51
Есть ответ: 170
Репутация: 547
Откуда: Белгород
Контактная информация:
Статус: Не в сети

Добрый подскажите код spoiler

Сообщение DesignerMix » 19 окт 2015, 20:34


Этот спойлер делал я сам на основе спойлера с рутрекера и из-за этого код совсем некрасивый, но рабочий. Ссылки на картинки плюса и минуса смените на ваши.

Примеры:

Код: Выделить всё

[spoiler={TEXT1}]{TEXT2}[/spoiler]


Замена HTML:

Код: Выделить всё

<div style="padding: 10px 0px 5px 0px;"><!--spoiler-wrap-->
  <div style="
     width: 97%;
   margin-right: 6px;
   clear: both;
   background: rgb(244, 246, 251);
   border: solid rgb(204, 204, 255);
   border-width: 1px 1px 1px 1px;
   font: 12px Verdana,Arial,sans-serif;">
    <div style="
      font-size: 11px;
   padding: 3px 3px 3px 15px;
   line-height: 15px;
   font-weight: bold;
   background: #F5E3D1;
padding-left: 6px;
   background-color: #FFF9EF;
      cursor: pointer;"
     onclick="
     hidn = this.parentNode.getElementsByTagName('div')[1];
     btn = this.getElementsByTagName('img')[0];
     if (hidn.style.display != '') { hidn.style.display = '';
     orimg = btn.src; btn.src = 'styles/se_square_left/theme/images/minus.gif'; } else {

hidn.style.display = 'none';
     btn.src = orimg; }">
   <img style="margin: 0; padding: 2px 2px 0;" src="styles/se_square_left/theme/images/plus.gif" />
    
 {TEXT1}
    
     </div>
      <!--spoiler-body-->
        <div style="line-height: 20px;
      padding: 10px 10px 10px 15px;
    display: none;
   border-top: 1px solid rgb(255, 255, 255);
   border-bottom: 0px solid rgb(255, 255, 255);
   border-left: 0px solid rgb(255, 255, 255);
   border-right: 0px solid rgb(255, 255, 255);
   background: rgb(244, 246, 251);
   border-style: solid;
    border-top-style: solid;
    border-right-style-value: solid;
    border-bottom-style: solid;
    border-left-style-value: solid;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
   border-color: #C3CBD1;
    border-top-color: #C3CBD1;
    border-right-color-value: #C3CBD1;
    border-bottom-color: #C3CBD1;
-moz-border-top-colors: none;
-moz-border-bottom-colors: none;">

{TEXT2}

</div>
      <!--/spoiler-body-->
  </div>
<!--/spoiler-wrap-->
</div>



Пример спойлера
Текст в спойлере