{"id":44054,"date":"2026-05-21T14:26:01","date_gmt":"2026-05-21T14:26:01","guid":{"rendered":"https:\/\/getshortcodes.com\/?post_type=demo-modal&p=44054"},"modified":"2026-05-21T16:02:01","modified_gmt":"2026-05-21T16:02:01","slug":"accordion","status":"publish","type":"demo-modal","link":"https:\/\/getshortcodes.com\/demo-modal\/accordion\/","title":{"rendered":"Accordion"},"content":{"rendered":"\n

Basic Example<\/h2>\n\n\n
<\/span>Spoiler Title<\/div>
Hidden content<\/div><\/div>\n\n\n\n
Shortcode<\/summary>\n
[su_spoiler title=\"Spoiler Title\" open=\"yes\"]Hidden content[\/su_spoiler]<\/code><\/pre>\n<\/details>\n\n\n\n
Open by Default<\/h2>\n\n\n
<\/span>Spoiler Title<\/div>
Hidden content<\/div><\/div>\n\n\n\n
Shortcode<\/summary>\n
[su_spoiler title=\"Spoiler Title\" open=\"yes\"]Hidden content[\/su_spoiler]<\/code><\/pre>\n<\/details>\n\n\n\n
Basic Styles<\/h2>\n\n\n
<\/span>Default Style<\/div>
Hidden content<\/div><\/div>\n
<\/span>Fancy Style<\/div>
Hidden content<\/div><\/div>\n
<\/span>Simple Style<\/div>
Hidden content<\/div><\/div>\n\n\n\n
Shortcode<\/summary>\n
[su_spoiler title=\"Default Style\" style=\"default\"]Hidden content[\/su_spoiler]\n[su_spoiler title=\"Fancy Style\" style=\"fancy\"]Hidden content[\/su_spoiler]\n[su_spoiler title=\"Simple Style\" style=\"simple\"]Hidden content[\/su_spoiler]<\/code><\/pre>\n<\/details>\n\n\n\n
Modern Styles<\/h2>\n\n\n
<\/span>Modern: Dark<\/div>
 Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products. <\/div><\/div>\n
<\/span>Modern: Light<\/div>
 Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric “outside the box” thinking. Completely pursue scalable customer service through sustainable potentialities. <\/div><\/div>\n
<\/span>Modern: Violet<\/div>
 Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services. Seamlessly empower fully researched growth strategies and interoperable internal or “organic” sources. <\/div><\/div>\n
<\/span>Modern: Orange<\/div>
 Credibly innovate granular internal or “organic” sources whereas high standards in web-readiness. Energistically scale future-proof core competencies vis-a-vis impactful experiences. Dramatically synthesize integrated schemas with optimal networks. <\/div><\/div>\n\n\n\n
Shortcode<\/summary>\n
[su_spoiler style=\"modern-dark\" open=\"yes\" title=\"Modern: Dark\"] Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products. [\/su_spoiler]\n\n[su_spoiler style=\"modern-light\" open=\"yes\" title=\"Modern: Light\"] Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric \"outside the box\" thinking. Completely pursue scalable customer service through sustainable potentialities. [\/su_spoiler]\n\n[su_spoiler style=\"modern-violet\" open=\"yes\" title=\"Modern: Violet\"] Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services. Seamlessly empower fully researched growth strategies and interoperable internal or \"organic\" sources. [\/su_spoiler]\n\n[su_spoiler style=\"modern-orange\" open=\"yes\" title=\"Modern: Orange\"] Credibly innovate granular internal or \"organic\" sources whereas high standards in web-readiness. Energistically scale future-proof core competencies vis-a-vis impactful experiences. Dramatically synthesize integrated schemas with optimal networks. [\/su_spoiler]<\/code><\/pre>\n<\/details>\n\n\n\n
Glass Styles<\/h2>\n\n\n
<\/span>Glass: Dark<\/div>
 Interactively procrastinate high-payoff content without backward-compatible data. Quickly cultivate optimal processes and tactical architectures. Completely iterate covalent strategic theme areas via accurate e-markets. <\/div><\/div>\n
<\/span>Glass: Light<\/div>
 Globally incubate standards compliant channels before scalable benefits. Quickly disseminate superior deliverables whereas web-enabled applications. Quickly drive clicks-and-mortar catalysts for change before vertical architectures. <\/div><\/div>\n
<\/span>Glass: Blue<\/div>
 Credibly reintermediate backend ideas for cross-platform models. Continually reintermediate integrated processes through technically sound intellectual capital. Holistically foster superior methodologies without market-driven best practices. <\/div><\/div>\n
<\/span>Glass: Green<\/div>
 Distinctively exploit optimal alignments for intuitive bandwidth. Quickly coordinate e-business applications through revolutionary catalysts for change. Seamlessly underwhelm optimal testing procedures whereas bricks-and-clicks processes. <\/div><\/div>\n
<\/span>Glass: Gold<\/div>
 Synergistically evolve 2.0 technologies rather than just in time initiatives. Quickly deploy strategic networks with compelling e-business. Credibly pontificate highly efficient manufactured products and enabled data. <\/div><\/div>\n\n\n\n
Shortcode<\/summary>\n
[su_spoiler style=\"glass-dark\" open=\"yes\" title=\"Glass: Dark\"] Interactively procrastinate high-payoff content without backward-compatible data. Quickly cultivate optimal processes and tactical architectures. Completely iterate covalent strategic theme areas via accurate e-markets. [\/su_spoiler]\n\n[su_spoiler style=\"glass-light\" open=\"yes\" title=\"Glass: Light\"] Globally incubate standards compliant channels before scalable benefits. Quickly disseminate superior deliverables whereas web-enabled applications. Quickly drive clicks-and-mortar catalysts for change before vertical architectures. [\/su_spoiler]\n\n[su_spoiler style=\"glass-blue\" open=\"yes\" title=\"Glass: Blue\"] Credibly reintermediate backend ideas for cross-platform models. Continually reintermediate integrated processes through technically sound intellectual capital. Holistically foster superior methodologies without market-driven best practices. [\/su_spoiler]\n\n[su_spoiler style=\"glass-green\" open=\"yes\" title=\"Glass: Green\"] Distinctively exploit optimal alignments for intuitive bandwidth. Quickly coordinate e-business applications through revolutionary catalysts for change. Seamlessly underwhelm optimal testing procedures whereas bricks-and-clicks processes. [\/su_spoiler]\n\n[su_spoiler style=\"glass-gold\" open=\"yes\" title=\"Glass: Gold\"] Synergistically evolve 2.0 technologies rather than just in time initiatives. Quickly deploy strategic networks with compelling e-business. Credibly pontificate highly efficient manufactured products and enabled data. [\/su_spoiler]<\/code><\/pre>\n<\/details>\n\n\n\n
More Styles<\/h2>\n\n\n
<\/span>Carbon<\/div>
 Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration. <\/div><\/div>\n
<\/span>Sharp<\/div>
 Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. <\/div><\/div>\n
<\/span>Grid<\/div>
 Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. <\/div><\/div>\n
<\/span>Wood<\/div>
 Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service. <\/div><\/div>\n
<\/span>Fabric<\/div>
 Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables. <\/div><\/div>\n\n\n\n
Shortcode<\/summary>\n
[su_spoiler style=\"carbon\" open=\"yes\" title=\"Carbon\"] Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration. [\/su_spoiler]\n\n[su_spoiler style=\"sharp\" open=\"yes\" title=\"Sharp\"] Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. [\/su_spoiler]\n\n[su_spoiler style=\"grid\" open=\"yes\" title=\"Grid\"] Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. [\/su_spoiler]\n\n[su_spoiler style=\"wood\" open=\"yes\" title=\"Wood\"] Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service. [\/su_spoiler]\n\n[su_spoiler style=\"fabric\" open=\"yes\" title=\"Fabric\"] Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables. [\/su_spoiler]<\/code><\/pre>\n<\/details>\n\n\n\n
Nested Spoilers<\/h2>\n\n\n
<\/span>Parent Spoiler<\/div>
\n
<\/span>Nested Spoiler<\/div>
Hidden content<\/div><\/div>\n
<\/span>Nested Spoiler<\/div>
Hidden content<\/div><\/div>\n<\/div><\/div>\n\n\n\n
Shortcode<\/summary>\n
[su_spoiler title=\"Parent Spoiler\" style=\"fancy\"]\n[_su_spoiler title=\"Nested Spoiler\" style=\"fancy\"]\n[__su_spoiler title=\"Second-level Nested Spoiler\" style=\"fancy\"]Hidden content[__\/su_spoiler]\n[_\/su_spoiler]\n[_su_spoiler title=\"Nested Spoiler\" style=\"fancy\"]Hidden content[_\/su_spoiler]\n[\/su_spoiler]<\/code><\/pre>\n<\/details>\n\n\n\n
Accordion – Single item open at a time<\/h2>\n\n\n
\n
<\/span>Spoiler Title<\/div>
Hidden content<\/div><\/div>\n
<\/span>Spoiler Title<\/div>
Hidden content<\/div><\/div>\n
<\/span>Spoiler Title<\/div>
Hidden content<\/div><\/div>\n<\/div>\n\n\n\n
Shortcode<\/summary>\n
[su_accordion]\n[su_spoiler title=\"Spoiler Title\" open=\"yes\"]Hidden content[\/su_spoiler]\n[su_spoiler title=\"Spoiler Title\" open=\"no\"]Hidden content[\/su_spoiler]\n[su_spoiler title=\"Spoiler Title\" open=\"no\"]Hidden content[\/su_spoiler]\n[\/su_accordion]<\/code><\/pre>\n<\/details>\n\n\n\n
Various Icons<\/h2>\n\n\n
<\/span>icon=plus<\/div>
 Hidden Content <\/div><\/div>\n
<\/span>icon=plus-circle<\/div>
 Hidden Content <\/div><\/div>\n
<\/span>icon=plus-square-1<\/div>
 Hidden Content <\/div><\/div>\n
<\/span>icon=plus-square-2<\/div>
 Hidden Content <\/div><\/div>\n
<\/span>icon=arrow<\/div>
 Hidden Content <\/div><\/div>\n
<\/span>icon=arrow-circle-1<\/div>
 Hidden Content <\/div><\/div>\n
<\/span>icon=arrow-circle-2<\/div>
 Hidden Content <\/div><\/div>\n
<\/span>icon=chevron<\/div>
 Hidden Content <\/div><\/div>\n
<\/span>icon=chevron-circle<\/div>
 Hidden Content <\/div><\/div>\n
<\/span>icon=caret<\/div>
 Hidden Content <\/div><\/div>\n
<\/span>icon=caret-square<\/div>
 Hidden Content <\/div><\/div>\n
<\/span>icon=folder-1<\/div>
 Hidden Content <\/div><\/div>\n
<\/span>icon=folder-2<\/div>
 Hidden Content <\/div><\/div>\n\n\n\n
Shortcode<\/summary>\n
[su_spoiler title=\"icon=plus\" icon=\"plus\"] Hidden Content [\/su_spoiler]\n[su_spoiler title=\"icon=plus-circle\" icon=\"plus-circle\"] Hidden Content [\/su_spoiler]\n[su_spoiler title=\"icon=plus-square-1\" icon=\"plus-square-1\"] Hidden Content [\/su_spoiler]\n[su_spoiler title=\"icon=plus-square-2\" icon=\"plus-square-2\"] Hidden Content [\/su_spoiler]\n[su_spoiler title=\"icon=arrow\" icon=\"arrow\"] Hidden Content [\/su_spoiler]\n[su_spoiler title=\"icon=arrow-circle-1\" icon=\"arrow-circle-1\"] Hidden Content [\/su_spoiler]\n[su_spoiler title=\"icon=arrow-circle-2\" icon=\"arrow-circle-2\"] Hidden Content [\/su_spoiler]\n[su_spoiler title=\"icon=chevron\" icon=\"chevron\"] Hidden Content [\/su_spoiler]\n[su_spoiler title=\"icon=chevron-circle\" icon=\"chevron-circle\"] Hidden Content [\/su_spoiler]\n[su_spoiler title=\"icon=caret\" icon=\"caret\"] Hidden Content [\/su_spoiler]\n[su_spoiler title=\"icon=caret-square\" icon=\"caret-square\"] Hidden Content [\/su_spoiler]\n[su_spoiler title=\"icon=folder-1\" icon=\"folder-1\"] Hidden Content [\/su_spoiler]\n[su_spoiler title=\"icon=folder-2\" icon=\"folder-2\"] Hidden Content [\/su_spoiler]<\/code><\/pre>\n<\/details>\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false},"class_list":["post-44054","demo-modal","type-demo-modal","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/demo-modal\/44054","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/demo-modal"}],"about":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/types\/demo-modal"}],"wp:attachment":[{"href":"https:\/\/getshortcodes.com\/api\/wp\/v2\/media?parent=44054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}