brktfldg

Read about the project

Usage

Load the library using the following CDN link from jsDelivr:

https://cdn.jsdelivr.net/npm/@devidw/brktfldg

To add collapse/expand functionality to all brackets inside an element and its children, use the collapseBrackets(el, options) function:

1<p>This is a paragraph (and this is something useless).</p>
2
3<script type="module">
4    import { collapseBrackets } from "https://cdn.jsdelivr.net/npm/@devidw/brktfldg"
5
6    collapseBrackets(document.querySelector("p"))
7</script>

Configuration

Optionally an options object can be passed to the collapseBrackets function to configure the behaviour and look of the interactive brackets.

The following configuration options are available with their default values:

1{
2    needles: ["(", ")"], // The characters to search for
3    needleRegex: /\((?!\))|(?<!\()\)/g, // The regex to test text nodes for
4    replacements: ["(", ")"], // Replaces the original opening and closing bracket characters with the given ones
5    placeholder: "…", // Displayed as text for the toggle to expand and collapse the content
6    shortMaxWords: 1, // Number of words to determine if the content is short, quick expanding is possible on short conent when enabled and the word count is not displayed on short content
7    wordCount: true, // Show word count
8    expandShortOnHover: true, // Expand brackets with short content on hover
9    ignoreTags: ["script", "style", "pre", "code", "brktfldg-container"], // Ignore these tags
10}

---