<h2>Basic accordion</h2>
<div class="su-accordion">
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
</div>
<div style="clear:both"></div><div class="su-examples-code"><span class="su-examples-get-code button"><i class="fa fa-code"></i>&nbsp;&nbsp;Get the code</span><textarea rows="8">&lt;h2&gt;Basic accordion&lt;/h2&gt;

[su_accordion]
  [su_spoiler title=&quot;Spoiler title&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;Spoiler title&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;Spoiler title&quot;] Spoiler content [/su_spoiler]
[/su_accordion]</textarea></div><h2>Fancy accordion</h2>
<div class="su-accordion">
<div class="su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
</div>
<div style="clear:both"></div><div class="su-examples-code"><span class="su-examples-get-code button"><i class="fa fa-code"></i>&nbsp;&nbsp;Get the code</span><textarea rows="8">&lt;h2&gt;Fancy accordion&lt;/h2&gt;

[su_accordion]
  [su_spoiler title=&quot;Spoiler title&quot; style=&quot;fancy&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;Spoiler title&quot; style=&quot;fancy&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;Spoiler title&quot; style=&quot;fancy&quot;] Spoiler content [/su_spoiler]
[/su_accordion]</textarea></div><h2>Accordion with open spoiler</h2>
<div class="su-accordion">
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
</div>
<div style="clear:both"></div><div class="su-examples-code"><span class="su-examples-get-code button"><i class="fa fa-code"></i>&nbsp;&nbsp;Get the code</span><textarea rows="8">&lt;h2&gt;Accordion with open spoiler&lt;/h2&gt;

[su_accordion]
  [su_spoiler title=&quot;Spoiler title&quot; open=&quot;yes&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;Spoiler title&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;Spoiler title&quot;] Spoiler content [/su_spoiler]
[/su_accordion]</textarea></div><h2>Different spoiler styles</h2>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-simple su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div style="clear:both"></div><div class="su-examples-code"><span class="su-examples-get-code button"><i class="fa fa-code"></i>&nbsp;&nbsp;Get the code</span><textarea rows="6">&lt;h2&gt;Different spoiler styles&lt;/h2&gt;

[su_spoiler title=&quot;Spoiler title&quot; style=&quot;default&quot;] Spoiler content [/su_spoiler]
[su_spoiler title=&quot;Spoiler title&quot; style=&quot;fancy&quot;] Spoiler content [/su_spoiler]
[su_spoiler title=&quot;Spoiler title&quot; style=&quot;simple&quot;] Spoiler content [/su_spoiler]</textarea></div><h2>Open spoilers</h2>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-simple su-spoiler-icon-plus">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div style="clear:both"></div><div class="su-examples-code"><span class="su-examples-get-code button"><i class="fa fa-code"></i>&nbsp;&nbsp;Get the code</span><textarea rows="6">&lt;h2&gt;Open spoilers&lt;/h2&gt;

[su_spoiler title=&quot;Spoiler title&quot; style=&quot;default&quot; open=&quot;yes&quot;] Spoiler content [/su_spoiler]
[su_spoiler title=&quot;Spoiler title&quot; style=&quot;fancy&quot; open=&quot;yes&quot;] Spoiler content [/su_spoiler]
[su_spoiler title=&quot;Spoiler title&quot; style=&quot;simple&quot; open=&quot;yes&quot;] Spoiler content [/su_spoiler]</textarea></div><h2>Spoilers with anchors (see the code)</h2>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-anchor="Spoiler-1">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-anchor="Spoiler-2">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-anchor="Spoiler-3">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<p>Use next links to open this spoilers</p>
<p><a href="#Spoiler-1">Open spoiler 1</a> | <a href="#Spoiler-2">Open spoiler 2</a> | <a href="#Spoiler-3">Open spoiler 3</a></p>
<div style="clear:both"></div><div class="su-examples-code"><span class="su-examples-get-code button"><i class="fa fa-code"></i>&nbsp;&nbsp;Get the code</span><textarea rows="10">&lt;h2&gt;Spoilers with anchors (see the code)&lt;/h2&gt;

[su_spoiler title=&quot;Spoiler title&quot; anchor=&quot;Spoiler-1&quot;] Spoiler content [/su_spoiler]
[su_spoiler title=&quot;Spoiler title&quot; anchor=&quot;Spoiler-2&quot;] Spoiler content [/su_spoiler]
[su_spoiler title=&quot;Spoiler title&quot; anchor=&quot;Spoiler-3&quot;] Spoiler content [/su_spoiler]

Use next links to open this spoilers

&lt;a href=&quot;#Spoiler-1&quot;&gt;Open spoiler 1&lt;/a&gt; | &lt;a href=&quot;#Spoiler-2&quot;&gt;Open spoiler 2&lt;/a&gt; | &lt;a href=&quot;#Spoiler-3&quot;&gt;Open spoiler 3&lt;/a&gt;</textarea></div><h2>Accordion + Spoilers + Anchors (see the code)</h2>
<div class="su-accordion">
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-anchor="Accordion-1">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-anchor="Accordion-2">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-anchor="Accordion-3">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
</div>
<p>Use next links to expand accordion items</p>
<p><a href="#Accordion-1">Open spoiler 1</a> | <a href="#Accordion-2">Open spoiler 2</a> | <a href="#Accordion-3">Open spoiler 3</a></p>
<div style="clear:both"></div><div class="su-examples-code"><span class="su-examples-get-code button"><i class="fa fa-code"></i>&nbsp;&nbsp;Get the code</span><textarea rows="12">&lt;h2&gt;Accordion + Spoilers + Anchors (see the code)&lt;/h2&gt;

[su_accordion]
  [su_spoiler title=&quot;Spoiler title&quot; anchor=&quot;Accordion-1&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;Spoiler title&quot; anchor=&quot;Accordion-2&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;Spoiler title&quot; anchor=&quot;Accordion-3&quot;] Spoiler content [/su_spoiler]
[/su_accordion]

Use next links to expand accordion items

&lt;a href=&quot;#Accordion-1&quot;&gt;Open spoiler 1&lt;/a&gt; | &lt;a href=&quot;#Accordion-2&quot;&gt;Open spoiler 2&lt;/a&gt; | &lt;a href=&quot;#Accordion-3&quot;&gt;Open spoiler 3&lt;/a&gt;</textarea></div><h2>Different icons</h2>
<div class="su-accordion">
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>plus</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus-circle su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>plus-circle</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus-square-1 su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>plus-square-1</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus-square-2 su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>plus-square-2</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-arrow su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>arrow</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-arrow-circle-1 su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>arrow-circle-1</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-arrow-circle-2 su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>arrow-circle-2</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-caret su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>caret</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-caret-square su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>caret-square</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-folder-1 su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>folder-1</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-folder-2 su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>folder-2</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
</div>
<div style="clear:both"></div><div class="su-examples-code"><span class="su-examples-get-code button"><i class="fa fa-code"></i>&nbsp;&nbsp;Get the code</span><textarea rows="16">&lt;h2&gt;Different icons&lt;/h2&gt;

[su_accordion]
  [su_spoiler title=&quot;plus&quot; icon=&quot;plus&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;plus-circle&quot; icon=&quot;plus-circle&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;plus-square-1&quot; icon=&quot;plus-square-1&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;plus-square-2&quot; icon=&quot;plus-square-2&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;arrow&quot; icon=&quot;arrow&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;arrow-circle-1&quot; icon=&quot;arrow-circle-1&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;arrow-circle-2&quot; icon=&quot;arrow-circle-2&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;caret&quot; icon=&quot;caret&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;caret-square&quot; icon=&quot;caret-square&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;folder-1&quot; icon=&quot;folder-1&quot;] Spoiler content [/su_spoiler]
  [su_spoiler title=&quot;folder-2&quot; icon=&quot;folder-2&quot;] Spoiler content [/su_spoiler]
[/su_accordion]</textarea></div><h2>Custom styles</h2>
<div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus my-custom-spoiler su-spoiler-closed">
<div class="su-spoiler-title"><span class="su-spoiler-icon"></span>Spoiler title</div>
<div class="su-spoiler-content su-clearfix" style="display:none"> Spoiler content </div>
</div>
<p><!--
  IMPORTANT
  You need to add this CSS code to the custom CSS editor at plugin settings page
--></p>
<style>
  .su-spoiler.my-custom-spoiler {}
  .su-spoiler.my-custom-spoiler .su-spoiler-title { background-color: #84ADEA }
  .su-spoiler.my-custom-spoiler .su-spoiler-title .su-spoiler-icon,
  .su-spoiler.su-spoiler-closed.my-custom-spoiler .su-spoiler-title .su-spoiler-icon {
    left: 3px;
    background-color: #fff;
  }
  .su-spoiler.my-custom-spoiler .su-spoiler-content { background-color: #C0D1EB }
</style>
<div style="clear:both"></div><div class="su-examples-code"><span class="su-examples-get-code button"><i class="fa fa-code"></i>&nbsp;&nbsp;Get the code</span><textarea rows="19">&lt;h2&gt;Custom styles&lt;/h2&gt;

[su_spoiler title=&quot;Spoiler title&quot; class=&quot;my-custom-spoiler&quot;] Spoiler content [/su_spoiler]

&lt;!--
  IMPORTANT
  You need to add this CSS code to the custom CSS editor at plugin settings page
--&gt;
&lt;style&gt;
  .su-spoiler.my-custom-spoiler {}
  .su-spoiler.my-custom-spoiler .su-spoiler-title { background-color: #84ADEA }
  .su-spoiler.my-custom-spoiler .su-spoiler-title .su-spoiler-icon,
  .su-spoiler.su-spoiler-closed.my-custom-spoiler .su-spoiler-title .su-spoiler-icon {
    left: 3px;
    background-color: #fff;
  }
  .su-spoiler.my-custom-spoiler .su-spoiler-content { background-color: #C0D1EB }
&lt;/style&gt;</textarea></div><link rel='stylesheet' id='font-awesome-css'  href='http://www.ristorantesolymar.it/wp-content/plugins/types/embedded/toolset/toolset-common/utility/css/font-awesome/css/font-awesome.min.css?ver=4.4.0' type='text/css' media='all' />
<link rel='stylesheet' id='su-box-shortcodes-css'  href='http://www.ristorantesolymar.it/wp-content/plugins/shortcodes-ultimate/assets/css/box-shortcodes.css?ver=4.9.9' type='text/css' media='all' />
<script type='text/javascript' src='http://www.ristorantesolymar.it/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
<script type='text/javascript' src='http://www.ristorantesolymar.it/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var su_other_shortcodes = {"no_preview":"This shortcode doesn't work in live preview. Please insert it into editor and preview on the site."};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.ristorantesolymar.it/wp-content/plugins/shortcodes-ultimate/assets/js/other-shortcodes.js?ver=4.9.9'></script>
