{"id":14,"date":"2023-08-25T17:32:28","date_gmt":"2023-08-25T17:32:28","guid":{"rendered":"\/\/api.jquerymobile.com\/1.3\/?p=14"},"modified":"2023-08-25T17:32:28","modified_gmt":"2023-08-25T17:32:28","slug":"collapsible","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.3\/collapsible\/","title":{"rendered":"Collapsible Widget"},"content":{"rendered":"

\nCollapsible Widget<\/span>version added: 1.0<\/span>\n<\/h2>\n
\n

Description: <\/strong>Creates a collapsible block of content<\/p>\n

QuickNavExamples<\/a>\n<\/h2><\/header>
\n

Options<\/h3>\n
collapseCueText<\/a><\/div>\n
collapsed<\/a><\/div>\n
collapsedIcon<\/a><\/div>\n
corners<\/a><\/div>\n
expandCueText<\/a><\/div>\n
expandedIcon<\/a><\/div>\n
heading<\/a><\/div>\n
iconpos<\/a><\/div>\n
initSelector<\/a><\/div>\n
inset<\/a><\/div>\n
mini<\/a><\/div>\n
theme<\/a><\/div>\n<\/div>\n

Methods<\/h3><\/div>\n
\n

Events<\/h3>\n
collapse<\/a><\/div>\n
create<\/a><\/div>\n
expand<\/a><\/div>\n<\/div><\/section>
\n\t\t

To create a collapsible block of content, create a container and add the data-role="collapsible" attribute. Using data-content-theme attribute allows you to set a theme for the content of the collapsible.<\/p>\n\t\t

Directly inside this container, add any header (H1-H6) or legend element. The framework will style the header to look like a clickable button and add a "+" icon to the left to indicate it's expandable.<\/p>\n\t\t

After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden\/shown when the heading is clicked.<\/p>\n\t\t

By default, the content will be collapsed.<\/p>\n

\n\t\n\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t
1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t
4<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
<div<\/span> data-role<\/span>="collapsible"<\/span>><\/span><\/code><\/div><\/div>
  <h3<\/span>><\/span>I'm a header<\/h3<\/span>><\/span><\/code><\/div><\/div>
  <p<\/span>><\/span>I'm the collapsible content. By default I'm closed, but you can click the header to open me.<\/p<\/span>><\/span><\/code><\/div><\/div>
<\/div<\/span>><\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t
This code will create a collapsible widget like this:\n\t\t