{"id":51,"date":"2017-02-17T20:17:36","date_gmt":"2017-02-17T20:17:36","guid":{"rendered":"http:\/\/wordpress.library.illinois.edu\/wp-training\/?page_id=51"},"modified":"2018-03-06T22:36:12","modified_gmt":"2018-03-06T22:36:12","slug":"collapsible-panes-2","status":"publish","type":"page","link":"https:\/\/wordpress.library.illinois.edu\/wp-training\/shortcodes\/collapsible-panes-2\/","title":{"rendered":"Collapsible panes"},"content":{"rendered":"

When to use<\/h2>\n

Collapsible panes\u00a0allow you to hide chunks of text in a hidden pane and reveal them when a user clicks the pane’s header. This feature can be helpful, for example, when creating long lists of lists where you want to keep the list headings above-the-fold. Collapsible panes are a bit more involved than some other shortcodes, but they are still relatively easy to master!<\/p>\n

Basic Usage: <\/h2>\n

[collapse-pane title=\"Heading\"]Content[endcollapse-pane]<\/p>\n

    \n
  1. Begin opening the collapsible pane:<\/strong>
    \n[collapse-pane<\/li>\n
  2. Add the required title attribute, set its value to the heading you would like to appear at the top of the pane, and add the final bracket:<\/strong>
    \ntitle=”The heading of a collapsible pane.]<\/li>\n
  3. Add the content to be shown in the pane:<\/strong>
    \nContent of the collapsible pane.<\/li>\n
  4. Close the collapsible pane:<\/strong>
    \n[endcollapse-pane]<\/li>\n<\/ol>\n

    Results<\/h3>\n

    <\/p>\n

    Code<\/h4>\n


    \n[collapse-pane title=”The heading of a collapsible pane.”]
    \nContent of the collapsible pane.
    \n[endcollapse-pane]<\/div><\/div><\/div><\/div>
    <\/p>\n

    Rendering<\/h4>\n


    \n\n
    \n \n
    \n
    The heading of a collapsible pane.<\/span><\/div>\n
    \n
    \n
    expand <\/span><\/div>\n
    <\/i> <\/div>\n <\/div>\n <\/div>\n