Как создать кнопку-раскрывашку?

Искользуя всего лишь 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 это блочный элемент, соответственно ему можно сделать прерывистое подчеркивание только на всю его ширину, что не очень симпатично.

Примеры реального применения - в Синтаксисе.