Please note: This plug-in concentrates on drawing the SVG icon, which may even
be animated with CSS transitions. The actual content-folding is not part of this plug-in.
The following examples add some very simple folding with jQuery's show()
and hide() methods with a delay argument. These show() and hide()
mechanism actually needed some tricky CSS tweaks to really run smoothly (only
for the collapsable secions examples below), please refer to the source code of this page
if interested.
Let's start the examples with the most common use-case: foldable sub-lists in list items:
The examples above demonstrate the default shape of the folding arrow icon, being a closed triangle pointing to the right resp. down. The javascript to include them is quite simple:
$("#l1 > li, #l1 ul.folding-arrows > li").prependFoldingArrowIcon();
This JavaScript alone is not enough, since the inserted SVG is unstyled, so you need to add some CSS code to define the size and color theme:
This Library already comes with an included CSS file (jquery-folding-arrow-icon.css),
which defines a default size for the images and the transition for rotating the arrow when
the CSS class of the list item changes. Specifically for icons in unordered lists,
it also contains rules which align list items without bullets and with this SVG image
(inline inside the li's content) neatly with other normally bulleted list items.
But including that CSS file still isn't enough, since it does not define the actual look (colors and line with) of the graphic. That, you' still have to define on your own (otherwise it will default to a black triangle):
#g1 .folding-arrow-icon path {
stroke: none;
fill: silver;
}
#g1b .folding-arrow-icon path {
stroke: none;
fill: #a00
}
First paragraph of section
First paragraph of section
First paragraph of section
First paragraph of section
First paragraph of section
First paragraph of section