Спойлер с функцией закрытия снизу. Удобная функция если текст спрятанный в спойлер очень большой, либо большое количество изображений, чтобы не возвращаться к заголовку достаточно кликнуть на кнопку находящуюся в нижней части спойлера, для его закрытия.
Использование BBCode
Замена HTML
Подсказка
В тему стиля:
Пример:
Использование BBCode
Код: Выделить всё
[spoiler={TEXT1}]{TEXT2}[/spoiler]
Код: Выделить всё
<div id="spoil_wrap">
<div title="Скрытый текст" class="spoil_title" onclick="hidn = this.parentNode.getElementsByTagName('div')[1]; btn = this.getElementsByTagName('img')[0]; if (hidn.style.display != '') { hidn.style.display = ''; orimg = btn.src; btn.src = 'data:image/gif;base64,R0lGODlhCQAJAMQeAOLt+ff8//z+/4CRxo2by7vF6a254X6PxICQw87a74CQxuXo84CQxM/b7/H6/v7+/oGRxouayoGSxv7+/8LN7IqZyv7//4KSxur0/MrV74OTx9Ld8trl9gwMDP///wAAACH5BAEAAB4ALAAAAAAJAAkAAAU4oFcpwzFAkWgUVLZxCQGxLgdgGtS+t6NJmY5QOEFcNo/kZGLRXGwYR0DQjDSiU8uCIJJIGJdLKgQAOw=='; } else { hidn.style.display = 'none'; btn.src = orimg; }; hidn = this.parentNode.getElementsByTagName('span')[0]; if (hidn.style.display != '') { hidn.style.display = ''; } else { hidn.style.display = 'none'; btn.src = orimg; }">
<img style="margin: 0; padding: 5px 5px 0" src="data:image/gif;base64,R0lGODlhCQAJAMQfAIqZyoGSxv3+/trl84CQxYCRxn6PxMXQ7efq9H+Pwtnk8oKTxoCQxKy44QAAANvl9rvG6fD5/o2by4GRxvb8//v9//7+/ubw+v39/ouayoKSxoOTx/7+/wwMDP///////yH5BAEAAB8ALAAAAAAJAAkAAAU84AdoGkNmX4Z4HldRirSxXMdF1zK7nXU9mk2t4+h0BIlNhWPpYTCBDQXXwRwggczgJ8BAGhLRZGIoEFAhADs=" alt="{L_EXPAND_VIEW}" width="9" height="9" border="0" />
<h>{TEXT1}</h>
</div>
<span class="spoil_close" title="{L_COLLAPSE_VIEW}" onclick="hidn = this.parentNode.getElementsByTagName('div')[1]; { hidn.style.display = 'none'; }; hidn = this.parentNode.getElementsByTagName('span')[0]; if (hidn.style.display != '') { hidn.style.display = ''; } else { hidn.style.display = 'none'; btn.src = orimg; }" style="display: none;">
[ {L_COLLAPSE_VIEW} ]
</span>
<div class="spoil_body" style="display: none;">
{TEXT2}
</div>
</div>
Код: Выделить всё
Скрытый текст
Код: Выделить всё
/* Spoiler */
#spoil_wrap {
margin: 8px auto;
border-color: #666666;
border-style: solid;
border-width: 0px 0px 1px 0px;
position: relative;
}
.spoil_title {
height: 19px;
cursor: pointer;
}
.spoil_title h {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 0.9em;
font-style: italic;
font-weight: bold;
color: #666;
}
.spoil_close {
text-align: right;
font-size: 10px;
cursor: pointer;
position: absolute;
bottom: 0;
right: 5px;
}
.spoil_body {
border-color: #666666;
border-style: solid;
padding: 6px 6px 15px;
border-width: 1px 1px 0px 1px;
}
+Заголовок
Комментарии: 6
Большое спасибо! Всё отлично установилось
Форум Science-Леди www.scienceclub.listbb.ru
CabinetAdmin, а можно ли сделать на основе старого только с новой функцией свернуть?
Т.е. вот там где у вас "+" и "-" и надпись "Заголовок".
Можно ли сделать,чтобы вместо "+" и "-" шло как раньше Скрытый текст: и кнопочка показать/скрыть (/)?
На всякий случай старый бб код спойлера
А то у меня пользователя так не любят ни к чему новому привыкать. А такая функция "свернуть" нам бы очень помогла.
Т.е. вот там где у вас "+" и "-" и надпись "Заголовок".
Можно ли сделать,чтобы вместо "+" и "-" шло как раньше Скрытый текст: и кнопочка показать/скрыть (/)?
На всякий случай старый бб код спойлера
+
Попробуйте так:
Код: Выделить всё
<div style="margin:20px; margin-top:5px"><div class="smallfont" style="margin-bottom:2px"><b>Скрытый текст</b>:<input type="button" value="Показать" style="width:60px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Скрыть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Показать'; }"></div><div class="alt2" style="margin: 0px; padding: 0px; border: 0px inset;"><div style="display: none;"> {TEXT} <br /><input type="button" value="{L_COLLAPSE_VIEW}" style="width:60px;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[0].style.display = ''; } else { this.parentNode.parentNode.getElementsByTagName('div')[0].style.display = 'none'; }"></div></div></div>
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Похожие темы
-
Добрый день. Вот у вас есть разные иконки -
А можно их вставить вместо иконок форумов ?
Вот этих.
Или слишком муторно будет ?