Пример аккордион

  Получить код<h2>Basic accordion</h2></p><br /> <p><div class="su-accordion su-u-trim"><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> </div>

  Получить код<h2>Fancy accordion</h2></p><br /> <p><div class="su-accordion su-u-trim"><br /><br /> <div class="su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> </div>

  Получить код<h2>Accordion with open spoiler</h2></p><br /> <p><div class="su-accordion su-u-trim"><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> </div>

  Получить код<h2>Different spoiler styles</h2></p><br /> <p><div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-simple su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div>

  Получить код<h2>Open spoilers</h2></p><br /> <p><div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-simple su-spoiler-icon-plus" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div>

  Получить код<h2>Spoilers with anchors (see the code)</h2></p><br /> <p><div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-anchor="Spoiler-1" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-anchor="Spoiler-2" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-anchor="Spoiler-3" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div></p><br /> <p>Use next links to open this spoilers</p><br /> <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>

  Получить код<h2>Accordion + Spoilers + Anchors (see the code)</h2></p><br /> <p><div class="su-accordion su-u-trim"><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-anchor="Accordion-1" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-anchor="Accordion-2" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-anchor="Accordion-3" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> </div></p><br /> <p>Use next links to expand accordion items</p><br /> <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>

  Получить код<h2>Different icons</h2></p><br /> <p><div class="su-accordion su-u-trim"><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>plus</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus-circle su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>plus-circle</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus-square-1 su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>plus-square-1</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus-square-2 su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>plus-square-2</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-arrow su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>arrow</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-arrow-circle-1 su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>arrow-circle-1</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-arrow-circle-2 su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>arrow-circle-2</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-caret su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>caret</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-caret-square su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>caret-square</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-folder-1 su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>folder-1</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> <div class="su-spoiler su-spoiler-style-default su-spoiler-icon-folder-2 su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>folder-2</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div><br /><br /> </div>

  Получить код<h2>Custom styles</h2></p><br /> <p><div class="su-spoiler su-spoiler-style-default su-spoiler-icon-plus my-custom-spoiler su-spoiler-closed" data-scroll-offset="0" data-anchor-in-url="no"><div class="su-spoiler-title" tabindex="0" role="button"><span class="su-spoiler-icon"></span>Spoiler title</div><div class="su-spoiler-content su-u-clearfix su-u-trim"> Spoiler content </div></div></p><br /> <p><!—<br /><br /> IMPORTANT<br /><br /> You need to add this CSS code to the custom CSS editor at plugin settings page<br /><br /> —><br /><br /> <style><br /><br /> .su-spoiler.my-custom-spoiler {}<br /><br /> .su-spoiler.my-custom-spoiler .su-spoiler-title { background-color: #84ADEA }<br /><br /> .su-spoiler.my-custom-spoiler .su-spoiler-title .su-spoiler-icon,<br /><br /> .su-spoiler.su-spoiler-closed.my-custom-spoiler .su-spoiler-title .su-spoiler-icon {<br /><br /> left: 3px;<br /><br /> background-color: #fff;<br /><br /> }<br /><br /> .su-spoiler.my-custom-spoiler .su-spoiler-content { background-color: #C0D1EB }<br /><br /> </style>