{"id":33929,"date":"2019-03-04T08:53:54","date_gmt":"2019-03-04T08:53:54","guid":{"rendered":"http:\/\/getshortcodes.com\/?post_type=docs&p=33929"},"modified":"2023-02-24T15:02:09","modified_gmt":"2023-02-24T15:02:09","slug":"accordion","status":"publish","type":"docs","link":"https:\/\/getshortcodes.com\/docs\/accordion\/","title":{"rendered":"Accordion"},"content":{"rendered":"\n

This shortcode has additional styles available in Shortcodes Ultimate Pro<\/a><\/p>\n\n\n

\n\t
\n\t\t

Single Spoiler<\/strong><\/p>\n

\n
<\/span>Spoiler title<\/div>\n
Hidden content <\/div>\n<\/div>\n

Multiple Spoilers wrapped with Accordion<\/strong><\/p>\n

\n
\n
<\/span>Spoiler title<\/div>\n
Hidden content <\/div>\n<\/div>\n
\n
<\/span>Spoiler title<\/div>\n
Hidden content <\/div>\n<\/div>\n
\n
<\/span>Spoiler title<\/div>\n
Hidden content <\/div>\n<\/div>\n<\/div>\n\t<\/div>\n\t
\n\t\tGet the code<\/summary>\n\t\t
<strong>Single Spoiler<\/strong>\n\n
<\/span>"Spoiler<\/div>
 Hidden content <\/div><\/div>\n\n<strong>Multiple Spoilers wrapped with Accordion<\/strong>\n\n
\n
<\/span>"Spoiler<\/div>
 Hidden content <\/div><\/div>\n
<\/span>"Spoiler<\/div>
 Hidden content <\/div><\/div>\n
<\/span>"Spoiler<\/div>
 Hidden content <\/div><\/div>\n<\/div><\/pre>\n\t<\/details>\n<\/div>\n\n\n
Table of contents<\/p>\n\n
  1. Description<\/a><\/li>
  2. Options<\/a>
    1. <\/div> \u2013 container<\/a><\/li>
    2. <\/span>Spoiler title<\/div>
      <\/div><\/div> \u2013 single spoiler<\/a><\/li><\/ol><\/li>
    3. If accordion doesn't work<\/a><\/li>
    4. Related articles<\/a><\/li><\/ol><\/li><\/ol>\n\n\n
      Description<\/h2>\n\n\n\n
      This shortcode allows you to create blocks with hidden content - spoilers (toggles). Hidden content will be shown when the block title will be clicked. You can specify different icons or even use different styles for each spoiler.<\/p>\n\n\n\n
      Options<\/h2>\n\n\n\n
      <\/div> \u2013 container<\/h3>\n\n\n\n
      class<\/a><\/td>Additional CSS class name(s) separated by space(s)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      <\/span>Spoiler title<\/div>
      <\/div><\/div> \u2013 single spoiler<\/h3>\n\n\n\n
      title<\/a><\/td>Text in spoiler title

      Default value:<\/strong> Spoiler title<\/code><\/td><\/tr>
      open<\/a><\/td>Is spoiler content visible by default

      Possible values:<\/strong> yes<\/code> or no<\/code>

      Default value:<\/strong> no<\/code><\/td><\/tr>
      style<\/a><\/td>Spoiler style

      Possible values:<\/strong>
      default<\/code>
      fancy<\/code>
      simple<\/code>
      carbon<\/code>
      sharp<\/code>
      grid<\/code>
      wood<\/code>
      fabric<\/code>
      modern-dark<\/code> (Modern: Dark)
      modern-light<\/code> (Modern: Light)
      modern-violet<\/code> (Modern: Violet)
      modern-orange<\/code> (Modern: Orange)
      glass-dark<\/code> (Glass: Dark)
      glass-light<\/code> (Glass: Light)
      glass-blue<\/code> (Glass: Blue)
      glass-green<\/code> (Glass: Green)
      glass-gold<\/code> (Glass: Gold)

      Default value:<\/strong> default<\/code><\/td><\/tr>
      icon<\/a><\/td>Icons for spoiler

      Possible values:<\/strong>
      plus<\/code>
      plus-circle<\/code> (Plus circle)
      plus-square-1<\/code> (Plus square 1)
      plus-square-2<\/code> (Plus square 2)
      arrow<\/code>
      arrow-circle-1<\/code> (Arrow circle 1)
      arrow-circle-2<\/code> (Arrow circle 2)
      chevron<\/code>
      chevron-circle<\/code> (Chevron circle)
      caret<\/code>
      caret-square<\/code> (Caret square)
      folder-1<\/code> (Folder 1)
      folder-2<\/code> (Folder 2)

      Default value:<\/strong> plus<\/code><\/td><\/tr>
      anchor<\/a><\/td>You can use a unique anchor for a spoiler to access it with hash in page URL. For example: use the word Hello and then use a URL like http:\/\/example.com\/page-url#Hello. This spoiler will be opened and scrolled in<\/td><\/tr>
      anchor_in_url<\/a><\/td>This option specifies whether an anchor will be added to page URL after clicking the spoiler

      Possible values:<\/strong> yes<\/code> or no<\/code>

      Default value:<\/strong> no<\/code><\/td><\/tr>
      scroll_offset<\/td>This option defines the top offset when the element is scrolled in. Can be useful along with the fixed site header.

      Possible values:<\/strong> number from 0<\/code> to 2000<\/code>

      Default value:<\/strong> 0<\/code><\/td><\/tr>
      class<\/a><\/td>Additional CSS class name(s) separated by space(s)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      If accordion doesn't work<\/h2>\n\n\n\n
      If an accordion doesn't work, isn't collapsing or expanding, chances are you have a JavaScript error on your page. Read this<\/a> to learn how to fix it.<\/p>\n\n\n\n
      Related articles<\/h2>\n\n\n\n