Начнём с тега скрытого текста, который разворачивается по клику мыши, по-другому такой тег называется Спойлер. Лучший спойлер для стиля prosilver, который я использую на своих форумах:
Код:
Код: Выделить всё
[spoiler={TEXT1}]{TEXT2}[/spoiler]Замена HTML:
Код: Выделить всё
<div style="margin: 8px auto; border: 1px solid #C3CBD1; border-left-width: 2px">
<div style="background: #E9E9E6; height: 19px; font-size: 0.9em; font-weight: bold; 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 = '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; }">
<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=" />
{TEXT1}
</div>
<div style="display: none; background: #F5F5F5; border-top: 1px solid #C3CBD1; padding: 6px">
{TEXT2}
</div>
</div>Текст подсказки:
Код: Выделить всё
Спойлер: [spoiler=заголовок спойлера]текст[/spoiler]Выглядит он так:
При необходимости цвета можно поправить и под другие стили.
.... [/spоler]
