используя jQuery, CSS и НЕ модифицируя html-код
Искользуя всего лишь CSS и jQuery можно создать удобную кнопку-раскрывашку и ловко встроить ее в движок PmWiki. Вот такую:
%p toggler% %dashed% прекрасная кнопка >>well<< блочный элемент >><< | прекрасная кнопка блочный элемент
|
jQuery код:
$(".toggler").click(function(){ $(this).next().slideToggle(50); })
всего лишь означает, что при клике на любой .toggler
следует "дернуть видимость" следующего за ним элемента (с задержкой в 50 миллисекунд).
CSS-код (для наглядности приведу в некомпилированном LESS-формате todo):
p.toggler { // кнопка-раскрывашка следующего за ней элемента cursor: pointer; &:hover > span.dashed {color:@link-hover-color; border-color: @link-hover-color;} & + * {display: none;} }
Параграф класса "toggler" оформить похожим на ссылку образом (только с прерывистым подчеркиванием), при наведении мыши менять цвета вложенного span.dashed, а всякий последующий элемент - скрыть. Это последнее свойство и будет "дергать" jQuery.
Wiki-код - %p toggler% %dashed% прекрасная кнопка
- создает <p class='toggler'>
и внутри него <span class='dashed'>
. Второе в общем-то, необязательно, оставлено только для внешнего оформления: p это блочный элемент, соответственно ему можно сделать прерывистое подчеркивание только на всю его ширину, что не очень симпатично.
Примеры реального применения - в Синтаксисе.