{"id":48304443,"url":"https://github.com/isg-software/folding-arrow","last_synced_at":"2026-04-04T23:55:56.052Z","repository":{"id":57282107,"uuid":"116406588","full_name":"isg-software/folding-arrow","owner":"isg-software","description":"jQuery plug-in for inserting arrow icons for foldable list items, sections etc. as inline SVG with CSS support.","archived":false,"fork":false,"pushed_at":"2018-10-07T15:34:10.000Z","size":100,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-20T03:21:40.949Z","etag":null,"topics":["accordion","arrow","collapsible-sections","collapsible-tree","css-transitions","inline-svg","jquery-plug","svg-icons"],"latest_commit_sha":null,"homepage":"https://isg-software.de/foldingarrow/indexe.html","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/isg-software.png","metadata":{"files":{"readme":"README.html","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-05T16:48:42.000Z","updated_at":"2018-10-07T15:34:12.000Z","dependencies_parsed_at":"2022-09-18T18:20:27.449Z","dependency_job_id":null,"html_url":"https://github.com/isg-software/folding-arrow","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/isg-software/folding-arrow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isg-software%2Ffolding-arrow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isg-software%2Ffolding-arrow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isg-software%2Ffolding-arrow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isg-software%2Ffolding-arrow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/isg-software","download_url":"https://codeload.github.com/isg-software/folding-arrow/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isg-software%2Ffolding-arrow/sbom","scorecard":{"id":495402,"data":{"date":"2025-08-11","repo":{"name":"github.com/isg-software/folding-arrow","commit":"1b0da86d4f37bdabdd79a8c3d2effc22449b7545"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/29 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: BSD 2-Clause \"Simplified\" License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-19T20:19:52.202Z","repository_id":57282107,"created_at":"2025-08-19T20:19:52.202Z","updated_at":"2025-08-19T20:19:52.202Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31419548,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T20:09:54.854Z","status":"ssl_error","status_checked_at":"2026-04-04T20:09:44.350Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accordion","arrow","collapsible-sections","collapsible-tree","css-transitions","inline-svg","jquery-plug","svg-icons"],"created_at":"2026-04-04T23:55:55.571Z","updated_at":"2026-04-04T23:55:56.045Z","avatar_url":"https://github.com/isg-software.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!DOCTYPE html\u003e\n\u003chtml xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"en\"\u003e\n\u003chead\u003e\n\t\u003cmeta charset=\"utf-8\"/\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003ch1 id=\"folding-arrow\"\u003efolding-arrow\u003c/h1\u003e\n\n\u003cp\u003ejQuery plug-in for inserting arrow icons for foldable list items, sections, burger menu icons etc. as inline SVG with CSS support. This especially includes the possibility of state transformations animated by CSS transitions.\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://www.isg-software.de/foldingarrow/indexe.html\"\u003eProject Homepage\u003c/a\u003e\u003c/p\u003e\n\n\u003ch2 id=\"motivation\"\u003eMotivation\u003c/h2\u003e\n\n\u003cp\u003eHave a look at the demo page, and you\u0026#8217;ll most certainly recognize the demonstrated icons, like triangle icons used to indicate whether a (sub)section is visible or collapsed/folded. One of the most common uses of such icons is in hierarchical lists to show list items with sub-lists and the state of the latter\u0026#8217;s visibility. For a collapsed sublist, the icon is usually an arrow to the right, whereas the arrow points down if the sublist\u0026#8217;s unfolded.\u003c/p\u003e\n\n\u003cp\u003eSince the actual look of the icon is not the major content of the HTML document, but simply a presentation style, a common way to achieve this is to simply add a class to the foldable list item which represents the logical state (open/visible or closed/collapsed/folded). The icon itself (being presentation) could simply be added by CSS, e.g. with rules like this:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"css\"\u003eli::before{ content: url(arrowRight.svg) }\nli.open::before{ content: url(arrowDown.svg) }\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eThen the JavaScript which shows/unfolds the list item\u0026#8217;s content simply has to add the class \u003ccode\u003eopen\u003c/code\u003e to the \u003ccode\u003eli\u003c/code\u003e node, and the script code which hides/shows the item\u0026#8217;s content has to remove that class again.\u003c/p\u003e\n\n\u003cp\u003eThis CSS-only way with external image files has, however, some disadvantages. Especially the sizing / scaling of the image might be tricky (e.g. \u003ccode\u003econtent\u003c/code\u003e can\u0026#8217;t be sized by CSS but has have a fixed size and can\u0026#8217;t depend dynamically on the font size). And when opening or closing the sublist, the image simply gets replaced, i.e. the arrow flips without animation. These were the main reasons for the development of this plug-in:\u003c/p\u003e\n\n\u003cp\u003eThis plug-in dynamically inserts an inline-SVG image into the HTML. Other than externally loaded and embedded SVG documents, inline-SVG is a part of the HTML document and may be styled by the HTML document\u0026#8217;s CSS. I.e. you may common define styles for the HTML list markup and for the included list icons at one central place.\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eYou may (actually \u003cem\u003ehave to\u003c/em\u003e) use CSS to size the icon and to define its properties like stroke, line width, fill color etc.\u003c/li\u003e\n\u003cli\u003eYou may style the image and the text (list item, section heading etc.) accordingly, even add dynamic styles like a hover effect to both of them (see demos).\u003c/li\u003e\n\u003cli\u003eAnd of course, CSS transitions allow for a smooth, animated state transition like a rotating triangle, a flipping arrow sign or a plus being smoothly transformed into a minus (see demos).\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eBut the plug-in doesn\u0026#8217;t stop there: It\u0026#8217;s configurable, so you can even define the actual SVG image (in JavaScript). Some typical images are provided as presets (including a transition). You can simply use these presets, modify them or create some custom images from scratch.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003ePlease note:\u003c/strong\u003e \u003cem\u003eThis plug-in concentrates on drawing the SVG icon (which may be animated with CSS transitions). The actual content-folding is not part of this plug-in.\u003c/em\u003e The demo page uses simple calls to jQuery\u0026#8217;s built-in \u003ccode\u003eslideDown()\u003c/code\u003e and \u003ccode\u003eslideUp()\u003c/code\u003e functions, but the demo code still has to do at least \u003cem\u003etwo\u003c/em\u003e things on each click event: fold or unfold the content \u003cem\u003eand\u003c/em\u003e toggle the CSS state class (like \u003ccode\u003eopen\u003c/code\u003e in the example above) of the list item or heading in order to change the icon. And if you want Internet Explorer- or MS Edge support, the event handler even has to perform a third step by calling an additional plug-in function for transforming the icon (since these MS browsers don\u0026#8217;t support CSS transformations on SVG).\u003c/p\u003e\n\n\u003cp\u003eI\u0026#8217;m considering publishing another jQuery plug-in with the focus on showing and hiding sections and automatically toggling a state class of a corresponding \u0026#8220;header\u0026#8221; element, to make that job even easier. Both plug-ins may then be combined for very simple (un-)folding of sections or list items.\u003c/p\u003e\n\n\u003ch2 id=\"gettingstarted\"\u003eGetting started\u003c/h2\u003e\n\n\u003cp\u003eLet\u0026#8217;s, for the start, assume, you have a simple unordered list (\u003ccode\u003e\u0026lt;ul\u0026gt;\u003c/code\u003e) and want to use folding-arrows (right- or downpointing triangles by default) instead of normal list bullets for every list item (\u003ccode\u003e\u0026lt;li\u0026gt;\u003c/code\u003e) of that list (not including sublists inside its list items).\u003c/p\u003e\n\n\u003cp\u003eWhat do you have to do at least—in the simplest case?\u003c/p\u003e\n\n\u003col\u003e\n\u003cli\u003eFit the unordered list with the class \u003ccode\u003efolding-arrows\u003c/code\u003e\u003ca href=\"#fn:1\" id=\"fnref:1\" title=\"see footnote\" class=\"footnote\"\u003e\u003csup\u003e1\u003c/sup\u003e\u003c/a\u003e:\n\n\u003cpre\u003e\u003ccode class=\"html\"\u003e\u0026lt;ul class=\u0026quot;folding-arrows\u0026quot;\u0026gt;\n\t\u0026lt;li\u0026gt;...\n\t\t\u0026lt;ul\u0026gt;...\u0026lt;/ul\u0026gt; \u003c!-- sub list --\u003e\n\t\u0026lt;/li\u0026gt;\n\t...\n\u0026lt;/ul\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\u003c/li\u003e\n\u003cli\u003eInclude the Script file as well as jQuery inside your HTML\u0026#8217;s \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e:\n\n\u003cpre\u003e\u003ccode class=\"html\"\u003e\u0026lt;script type=\u0026quot;text/javascript\u0026quot; src=\u0026quot;https://code.jquery.com/jquery-3.2.1.min.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script type=\u0026quot;text/javascript\u0026quot; src=\u0026quot;dist/jquery-folding-arrow-icon-min.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\u003c/li\u003e\n\u003cli\u003eInclude the default stylesheet that came along with the plug-in\u003ca href=\"#fn:2\" id=\"fnref:2\" title=\"see footnote\" class=\"footnote\"\u003e\u003csup\u003e2\u003c/sup\u003e\u003c/a\u003e:\n\n\u003cpre\u003e\u003ccode class=\"html\"\u003e\u0026lt;link rel=\u0026quot;stylesheet\u0026quot; type=\u0026quot;text/css\u0026quot; href=\u0026quot;dist/jquery-folding-arrow-icon.css\u0026quot;\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\u003c/li\u003e\n\u003cli\u003eWrite some custom JavaScript code to apply the plug-in: Write a query selecting all list items which should be fitted with the folding arrow icon. In this case, we select every list item of any unordered list of class \u003ccode\u003efolding-arrows\u003c/code\u003e, see above. To prepend the icon to the selected list items, call the \u003ccode\u003eprependFoldingArrowIcon\u003c/code\u003e plug-in—in this simple case without arguments, which implies all options are left on default values:\n\n\u003cpre\u003e\u003ccode class=\"javascript\"\u003e$(\u0026quot;ul.folding-arrows \u0026gt; li\u0026quot;).prependFoldingArrowIcon();\n\u003c/code\u003e\u003c/pre\u003e\u003c/li\u003e\n\u003cli\u003eThe included CSS file (see step 3) already contains default styles for lists of class \u003ccode\u003efolding-arrows\u003c/code\u003e. Especially, it turns off the default bullets and indents the first line more to the left such that the inline SVG icon (being part of the content of the first line) is arranged to the left of the actual text content and—at least with default options—the actual content of the line following the icon and its separator\u003ca href=\"#fn:3\" id=\"fnref:3\" title=\"see footnote\" class=\"footnote\"\u003e\u003csup\u003e3\u003c/sup\u003e\u003c/a\u003e aligns perfectly with the left margin of the following lines.\u003cbr /\u003e\n\u003cstrong\u003eBut\u003c/strong\u003e the CSS does \u003cem\u003enot\u003c/em\u003e define default visual styles for the icon, nor does the plug-in. The latter simply draws a path forming a triangle, but you have to style that path on your own by adding CSS rules for the \u003ccode\u003estroke\u003c/code\u003e and \u003ccode\u003efill\u003c/code\u003e properties, like e.g.:\n\n\u003cpre\u003e\u003ccode class=\"css\"\u003e.folding-arrow-icon path {\n    stroke: none;\n    fill: silver;\n}\n\u003c/code\u003e\u003c/pre\u003e\u003c/li\u003e\n\u003cli\u003eNow you have a folding-arrow icon able to indicate whether the contents of the list item are visible or not. But you still have to add JavaScript handlers to capture events (like a click on the icon or on a link in the list item) which should actually toggle the state (fold or unfold content). This event handler has to do three things:\n\n\u003col\u003e\n\u003cli\u003eActually show or hide the content, and\u003c/li\u003e\n\u003cli\u003eadd or remove the class \u003ccode\u003eshowing\u003c/code\u003e to resp. from the \u003ccode\u003e\u0026lt;li\u0026gt;\u003c/code\u003e item in order to flip the state of the indicator.\u003c/li\u003e\n\u003cli\u003eAfter adding/removing the \u003ccode\u003eshowing\u003c/code\u003e class to/from the \u003ccode\u003e\u0026lt;li\u0026gt;\u003c/code\u003e item, the handler should also call another jQuery plug-in function provided by this library: \u003ccode\u003e$(…).transformFoldingArrowIcon()\u003c/code\u003e.\u003cbr /\u003e\nThis is not actually mandatory, but it\u0026#8217;s needed for compatibility with Microsoft\u0026#8217;s browsers (Internet Explorer as well as Edge): Both don\u0026#8217;t support SVG transitions defined via CSS, they only understand transition attributes inside the SVG\u0026#8217;s DOM itself! The \u003ccode\u003etransformFoldingArrowIcon\u003c/code\u003e plug-in function therefore adds or removes a transition (by default a rotation by 90°) to/from the SVG\u0026#8217;s DOM—dependent, by default, on the presence or absence of the \u003ccode\u003eshowing\u003c/code\u003e class on the list item. It also supports adding a title to the image (e.g. showing as a pop-up when the mouse hovers over it) depending on the \u003ccode\u003eshowing\u003c/code\u003e state, but by default, no title is added.\n(As already said in the introduction, I\u0026#8217;m considering publishing a further jQuery plug-in which will simplify this sixth step.)\u003c/li\u003e\n\u003c/ol\u003e\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003eSee the demo page for working examples. You may create a copy of the demo page as a playground for your own experiments.\u003c/p\u003e\n\n\u003cp\u003eOf course the plug-in is quite flexible and customizable. For one, it isn\u0026#8217;t limited to be applied to list items, see demo page. It also doesn\u0026#8217;t force you to stick to constraints like the use of the specific class \u003ccode\u003efolding-arrows\u003c/code\u003e and such. Those are simply defaults, and if you don\u0026#8217;t want to stick to these defaults, you\u0026#8217;ll have to do more customization. Especially the included CSS file applies default styles to elements equipped with default classes, and if you want to use other class names, you can\u0026#8217;t simply use the default CSS file. Feel free to make a copy of the CSS and customize that to your needs. You should \u003cem\u003enot\u003c/em\u003e edit the included stylesheet, since future updates of the plug-in might then overwrite and thus reset your local changes—also that would break the demo page.\u003c/p\u003e\n\n\u003ch2 id=\"customization\"\u003eCustomization\u003c/h2\u003e\n\n\u003ch3 id=\"css\"\u003eCSS\u003c/h3\u003e\n\n\u003cp\u003eFirst of all, you \u003cem\u003ehave to\u003c/em\u003e write some own CSS code to style the looks of the generated icons (\u003ccode\u003estroke\u003c/code\u003e, \u003ccode\u003estroke-width\u003c/code\u003e and \u003ccode\u003efill\u003c/code\u003e), see \u003ca href=\"#gettingstarted\"\u003eGetting Started\u003c/a\u003e, step 5.\u003c/p\u003e\n\n\u003cp\u003eFurther CSS customization can be done by replacing the included \u003ccode\u003ejquery-folding-arrow-icon.css\u003c/code\u003e file by a modified/customized stylesheet of your own. You may write a new stylesheet from scratch, make a copy of said CSS file and modify that or make a copy of the included \u003ccode\u003eless\u003c/code\u003e source, modify that and convert that into CSS by a less compiler.\u003c/p\u003e\n\n\u003cp\u003eIt\u0026#8217;s \u003cem\u003enot\u003c/em\u003e recommended to modify the original \u003ccode\u003eless\u003c/code\u003e or \u003ccode\u003ecss\u003c/code\u003e files, at least not outside of a fork of the original project, since your changes might be overwritten when downloading updates of this package.\u003c/p\u003e\n\n\u003ch3 id=\"presets\"\u003ePresets\u003c/h3\u003e\n\n\u003cp\u003eAs demonstrated above in \u003ca href=\"#gettingstarted\"\u003eGetting Started\u003c/a\u003e, you may call the plug-in functions without parameters and you get default icons with default options.\u003c/p\u003e\n\n\u003cp\u003eActually, there are several alternative sets of default options available, mainly configuring different icons or transformations.\u003c/p\u003e\n\n\u003cp\u003eCurrently, the following presets are included:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003earrow-right\u003c/code\u003e: The is actually the default that is chosen if no options are configured at all: Right-pointing triangle rotating by 90 degrees when unfolding.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003earrow-up-down\u003c/code\u003e: The same triangle icon, but pointing either up or down, with a vertical flip transformation/transition.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eplus\u003c/code\u003e: Plus-icon with rotation by 45 degrees (i.e. transformation into an X icon) when unfolding.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eplus-minus\u003c/code\u003e: The same plus-icon, but transformed into a minus when unfolding by shrinking the vertical line.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eburger\u003c/code\u003e: A typical menu icon of three stacked horizontal lines, transformed into an X icon when unfolding.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eTwo more presets exist which don\u0026#8217;t contain transformations and are not meant to be transformed at all, but are intended to define some static list bullets for use in an unordered list of which only \u003cem\u003esome\u003c/em\u003e entries are foldable (and should be equipped with a transformable icon like defined by the presets above), while others remain static. Acutally, for this case you might simply stick to standard HTML bullets, but if you want a more consistent look and want to style those list bullets, too, you may create them with this very same plug-in. These two presets for static bullets are:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003edash\u003c/code\u003e: A simple dash icon (should probably not be combined with the \u003ccode\u003eplus-minus\u003c/code\u003e preset, since expanded list items with a minus icon would not be easy to tell apart from static list items with dash icon, but is very well suited for combination with arrow presets, especially if the arrow is only outlined and not closed, i.e. a chevron).\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003edisc\u003c/code\u003e: A small circle icon (via CSS you define wheter to draw a circle outline or a filled dot).\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eAll these presets are demonstrated in the included demo page.\u003c/p\u003e\n\n\u003cp\u003eA preset is simply called by passing the option \u003ccode\u003epreset\u003c/code\u003e with the name of the preset as argument (string literal), e.g.:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"javascript\"\u003e$(\u0026quot;ul.folding-arrows \u0026gt; li\u0026quot;).prependFoldingArrowIcon({\n\tpreset: \u0026quot;plus-minus\u0026quot;\n});\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eIf you plan to use the \u003ccode\u003etransformFoldingArrowIcon\u003c/code\u003e plug-in function (upon each state change) for IE-/Edge compatibility, then you should also once call the \u003ccode\u003esetupFoldingArrowIconTransformation\u003c/code\u003e function (usually directly after the prepend-/append-function) with exactly the same preset argument:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"javascript\"\u003e$(\u0026quot;ul.folding-arrows \u0026gt; li\u0026quot;).prependFoldingArrowIcon({\n\tpreset: \u0026quot;plus-minus\u0026quot;\n}).setupFoldingArrowIconTransformation({\n\tpreset: \u0026quot;plus-minus\u0026quot;\n});\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch3 id=\"plug-inoptions\"\u003ePlug-in options\u003c/h3\u003e\n\n\u003cp\u003eThe main \u003ccode\u003eprepend-\u003c/code\u003e and \u003ccode\u003eappendFoldingArrowIcon\u003c/code\u003e plug-in functions may be customized with some options defined in \u003ccode\u003e$.fn.appendFoldingArrowIcon.DEFAULTS\u003c/code\u003e alias \u003ccode\u003e$.fn.prependFoldingArrowIcon.DEFAULTS\u003c/code\u003e (by default both variables refer to the same object of default properties).\u003c/p\u003e\n\n\u003cp\u003eYou may globally (for your project) modify these defaults by changing that \u003ccode\u003eDEFAULTS\u003c/code\u003e object. Or you may pass an object of individual options to the plug-in function call like e.g.:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"javascript\"\u003e$(\u0026quot;ul.folding-arrows \u0026gt; li\u0026quot;).prependFoldingArrowIcon({\n\tclosePath: false,\n\tviewboxMargin: 2\n});\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eAll options that you don\u0026#8217;t include into that argument object will remain on default setting. This can also be combined with the \u003ccode\u003epreset\u003c/code\u003e option, in which case any given option overrides the default defined by that preset, and any not included option remains on the preset\u0026#8217;s default, e.g.:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"javascript\"\u003e$(\u0026quot;ul.folding-arrows \u0026gt; li\u0026quot;).prependFoldingArrowIcon({\n\tpreset: \u0026quot;arrow-up-down\u0026quot;,\n\tviewboxMargin: 2\n});\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cp\u003eThe same goes for the \u003ccode\u003esetupFoldingArrowIconTransformation\u003c/code\u003e plug-in function.\u003c/p\u003e\n\n\u003ch4 id=\"optionsforappendprependfoldingarrowicon\"\u003eOptions for \u003ccode\u003eappend|prependFoldingArrowIcon\u003c/code\u003e\u003c/h4\u003e\n\n\u003cp\u003eA list of the supported options (along with their default values) can be found in the source code:\u003c/p\u003e\n\n\u003cpre\u003e\u003ccode class=\"javascript\"\u003e\t/**\n\t * Default options for the plug-in functions appendFoldingArrowIcon and \n\t * prependFoldingArrowIcon.\n\t * Some of these options also apply to setupFoldingArrowIconTransformation.\n\t * You may globally alter these defaults or override individual options via\n\t * the argument of the aforementioned plug-in functions.\n\t */\n\t$.fn.appendFoldingArrowIcon.DEFAULTS =\n\t$.fn.prependFoldingArrowIcon.DEFAULTS = $.extend({}, {\n\t\t/**\n\t\t * Option svgClass: The generated inline SVG element will be equipped\n\t\t * with a class attribute, and this option defines its value.\n\t\t * This class can be used to select the SVG icons, which is especially\n\t\t * needed for applying CSS styles.\n\t\t */\n\t\tsvgClass: \u0026quot;folding-arrow-icon\u0026quot;,\n\t\t/**\n\t\t * Option containerClass: This class name will be added to the class attribute\n\t\t * of the container element (parent element of the inserted SVG node), \n\t\t * i.e. any element of the jquery resultset on which the \n\t\t * append-/prependFoldingArrowIcon() plug-in has been applied. \n\t\t * When used in unordered lists, the containers are the \u0026lt;li\u0026gt; elements.\n\t\t * This class can also be used for CSS formatting, especially in combination\n\t\t * with the 'showing' class defining the state toggle, see included CSS file:\n\t\t */\n\t\tcontainerClass: \u0026quot;folding-arrow\u0026quot;,\n\t\t/**\n\t\t * Option separator: This string is inserted between the SVG icon and the\n\t\t * container node's original content. So, when you call prependFoldingArrowIcon,\n\t\t * the SVG followed by this separator string are prepended to the node's content,\n\t\t * when you call appendFoldingArrowIcon, the separator string followed by the\n\t\t * SVG icon are appended to the node's content.\n\t\t * The default separator is an ensp, i.e. a space character of exactly\n\t\t * 1en = 0.5em width. The included default stylesheet for unordererd lists \n\t\t * relies on this width!\n\t\t */\n\t\tseparator: \u0026quot;\u0026amp;ensp;\u0026quot;,\n\t\t/**\n\t\t * Options viewboxRadius and viewboxMargin: \n\t\t * The generated SVG will be equipped with a viewBox attribut which defines a\n\t\t * the visible square region of the SVG's coordinate system centered around the \n\t\t * point (0, 0).\n\t\t * Let r be the sum of both options: r := viewboxRadius + viewboxMargin.\n\t\t * Then the CSS will have the following viewBox: \u0026quot;-r -r 2*r 2*r\u0026quot;.\n\t\t * The individual values are not used by the plug-in, only the sum of both is\n\t\t * evaluated. The only reason why there are _two_ options is for better\n\t\t * readability: The use of these two values is intended as follows:\n\t\t * viewboxRadius should describe half the width and height of the actual icon,\n\t\t * such that any coordinate used to describe the graph (i.e. point of a path, \n\t\t * edge of a polygon, endpoint of a line etc.) should be contained in the square\n\t\t * (-viewboxRadius, -viewboxRadius) / (viewboxRadius, viewboxRadius).\n\t\t * The option viewboxMargin can then be used to define the width of a margin \n\t\t * around the actual icon. A margin may be essential, if you don't just create\n\t\t * a filled graph without stroke, but if you have a stroke greater than zero:\n\t\t * If graph points touch the edge of the viewboxRadius square, the stroke will\n\t\t * then extend into the margin and would be clipped without one.\n\t\t * Also, during rotation transitions the transition paths of some of the \n\t\t * graph's points may easily leave the main graph region defined by the \n\t\t * viewboxRadius.\n\t\t * The default values define a 10-by-10-pixel area for the graph and a 1px margin\n\t\t * around that. Whenever you use the graph option to define your own graph and\n\t\t * you don't want to describe your graph with coordinate of this 10x10 area,\n\t\t * you have to override the viewboxRadius option accordingly to your graph's area.\n\t\t * The viewboxMargin option should be increased if you plan to use larger\n\t\t * stroke-width values in CSS.\n\t\t */\n\t\tviewboxRadius: 5,\n\t\tviewboxMargin: 1,\n\t\t/**\n\t\t * Option graph: Defines the actual graph. (The default graph is not initialized\n\t\t * at this place, but is copied from the preset \u0026quot;arrow-right\u0026quot;.)\n\t\t * A graph has to be an array of node definitions.\n\t\t * A node definition (element of the graph array) is an object with two properties\n\t\t * 'element' and 'attributes':\n\t\t * Property 'element' has to be a string defining an SVG element name (e.g. \u0026quot;line\u0026quot;,\n\t\t * \u0026quot;circle\u0026quot; or \u0026quot;path\u0026quot;).\n\t\t * Property 'attributes' has to be an object of key-value-pairs of type string\n\t\t * defining the attributes of the SVG element.\n\t\t * Example:\n\t\t * `graph: [{element: \u0026quot;circle\u0026quot;, attributes: {\u0026quot;cx\u0026quot;: \u0026quot;0\u0026quot;, \u0026quot;cy\u0026quot;: \u0026quot;0\u0026quot;, \u0026quot;r\u0026quot;: \u0026quot;3\u0026quot;}}]`\n\t\t * defines a graph consisting of just one SVG element, namely a circle around the\n\t\t * point (0,0), which is the center of the viewBox, and with a radius of 3.\n\t\t */\n\t\tgraph: undefined,\n\t\t/**\n\t\t * Option closePath:\n\t\t * If the graph option contains at least one `path` element which is not yet closed,\n\t\t * i.e. its start point and its end point differ, then this option defines whether\n\t\t * a \u0026quot;z\u0026quot; is appended to the path (which is a flag defining the path should be\n\t\t * closed by a line connecting start and end point).\n\t\t * The default graph is actually not a closed triangle, but a path shaped like\n\t\t * a grater than sign. Thus, while you use the default graph, and if you draw\n\t\t * a stroke (via CSS) this option controls whether that stroke is a closed triangle\n\t\t * or \u0026quot;just a chevron\u0026quot;.\n\t\t * If the graph does not contain any unclosed path element, the option has no\n\t\t * effect.\n\t\t */\n\t\tclosePath: true,\n\t\t/**\n\t\t * Option preset:\n\t\t * If you don't specify the graph neither the preset option, a default graph\n\t\t * (right-pointing triangle) will be used. You may override that by specifying\n\t\t * the graph option and thus defining your own graph.\n\t\t * But you may also simply load alternative graphs in the form of so-called\n\t\t * presets. A preset is simply a bundle of options which can be loaded all at\n\t\t * once by setting this 'preset' option. You may load the included presets as\n\t\t * well as create and use your own onces.\n\t\t * The value of this option has to be either...\n\t\t * - a string: the name of a preset or...\n\t\t * - an instance of class PresetCopy, obtained by calling the function\n\t\t *   $.fn.prependFoldingArrowIcon.copyOfPreset(presetName) and modifying\n\t\t *   that copy via its instance methods.\n\t\t *   (For an example, see demo page, section \u0026quot;Combine preset with circle\u0026quot;).\n\t\t */\n\t\tpreset: undefined\n\t}, $.fn.prependFoldingArrowIcon.PRESETS[\u0026quot;arrow-right\u0026quot;]);\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch4 id=\"optionsforsetupfoldingarrowicontransformation\"\u003eOptions for \u003ccode\u003esetupFoldingArrowIconTransformation\u003c/code\u003e\u003c/h4\u003e\n\n\u003cpre\u003e\u003ccode class=\"javascript\"\u003e\t/**\n\t * Default options for the plug-in function transformFoldingArrowIcon.\n\t * If you want to override these options, use the jQuery plug-in function\n\t * setupFoldingArrowIconTransformation() with an object enumarating the options\n\t * you want to override. This setup has to be called just once, and the\n\t * transformFoldingArrowIcon() function will then always use this setup.\n\t */\n\t$.fn.transformFoldingArrowIcon.DEFAULTS = $.extend({\n\t\t/**\n\t\t * Option ifIsSelector: \n\t\t * The transformFoldingArrowIcon function will add or remove a transition to\n\t\t * the selected nodes, depending on their state. This state is determined by\n\t\t * `jqr.is(opts.ifIsSelector)`: If the node matches the jQuery selector defined\n\t\t * by this string, the transformation is added, otherwise it's removed.\n\t\t * This is also used to switch titles, if defined.\n\t\t */\n\t\tifIsSelector: \u0026quot;.showing\u0026quot;,\n\t\t/**\n\t\t * Option transformations: Defines the transformation(s) the plug-in function\n\t\t * transformFoldingArrowIcon should apply to (or remove from) the SVG.\n\t\t * The value of this option has to be an array of single transformations.\n\t\t * A single transformation (element of that array) has to be an object of \n\t\t * key-value-pairs of type string. Each key is to be a selector and its value\n\t\t * a transformation rule.\n\t\t * The default is: [{\u0026quot;\u0026gt; g\u0026quot;: \u0026quot;rotate(90)\u0026quot;}], which means:\n\t\t * A single transformation will be added to the SVG, more specifically \n\t\t * a transformation attribute will be added to the SVG's child node of type\n\t\t * `g`(SVG group), and the content of that attribute will be \u0026quot;rotate(90)\u0026quot;.\n\t\t * To understand that, it's important to know that all graph elements defined\n\t\t * by the `graph` option (see above) will be grouped by a single `g` element,\n\t\t * this this transformation rule means: Rotate the whole graph by 90 degrees.\n\t\t * Of course you may also define transitions for individual child nodes of that\n\t\t * group, see presets \u0026quot;burger\u0026quot; or \u0026quot;plus-minus\u0026quot;.\n\t\t */\n\t\ttransformations: [\n\t\t\t{\n\t\t\t\t\u0026quot;\u0026gt; g\u0026quot;: \u0026quot;rotate(90)\u0026quot;\n\t\t\t}\n\t\t],\n\t\t/**\n\t\t * Option titleShowing: Defines a title to be added to the graph when the\n\t\t * ifIsSelector is matching (unfolded state). That title may be displayed by\n\t\t * the browser whenever the mouse cursor hovers over the icon.\n\t\t */\n\t\ttitleShowing: undefined,\n\t\t/**\n\t\t * Option titleHidden: Defines a title to be added to the graph when the\n\t\t * ifIsSelector is not matching.\n\t\t */\n\t\ttitleHidden: undefined\n\t}, $.fn.prependFoldingArrowIcon.DEFAULTS);\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003cdiv class=\"footnotes\"\u003e\n\u003chr /\u003e\n\u003col\u003e\n\n\u003cli id=\"fn:1\"\u003e\n\u003cp\u003eOf course you\u0026#8216;re not obliged to use exaclty \u003cem\u003ethat\u003c/em\u003e class name, that\u0026#8217;s just a default. But if you use another name, you can't use the included CSS file \u003ccode\u003ejquery-folding-arrow-icon.css\u003c/code\u003e in its original form (see step 3). You should then make a copy of that file and change that accordingly. \u003ca href=\"#fnref:1\" title=\"return to body\" class=\"reversefootnote\"\u003e\u0026#160;\u0026#8617;\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\n\u003cli id=\"fn:2\"\u003e\n\u003cp\u003eThis CSS file contains rules for a) formatting the unordered list in such a way that the in\u0026#8211;line SVG icons are aligned like list bullets (for any \u003ccode\u003eul.folding-arrows\u003c/code\u003e, see step 1) and b) it contains default transformation and transition rules for rotating the originally right\u0026#8211;pointing triangle by 90 degrees when the class \u003ccode\u003eshowing\u003c/code\u003e gets added to a \u003ccode\u003eli\u003c/code\u003e (see step 6). \u003ca href=\"#fnref:2\" title=\"return to body\" class=\"reversefootnote\"\u003e\u0026#160;\u0026#8617;\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\n\u003cli id=\"fn:3\"\u003e\n\u003cp\u003eThe separator is a string inserted between the inline SVG icon and the original list item\u0026#8216;s content. It can be explicitly set in the plug\u0026#8211;in\u0026#8217;s options. The included CSS file assumes the separator to be exactly \u003ccode\u003e0.5em\u003c/code\u003e wide, which is the case for the default separator (\u003ccode\u003e\u0026amp;ensp;\u003c/code\u003e). \u003ca href=\"#fnref:3\" title=\"return to body\" class=\"reversefootnote\"\u003e\u0026#160;\u0026#8617;\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\n\u003c/ol\u003e\n\u003c/div\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisg-software%2Ffolding-arrow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fisg-software%2Ffolding-arrow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisg-software%2Ffolding-arrow/lists"}