Accordions

Accordions Shortcodes

Accordions are great to show the content of your website and can be set in different styles.


Default

Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1One">
                    Accordion Title 1
                </a>
            </h4>
        </div>
        <div id="collapse1One" class="accordion-body collapse in">
            <div class="panel-body">
                <p>Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa.</p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1Two">
                    Accordion Title 2
                </a>
            </h4>
        </div>
        <div id="collapse1Two" class="accordion-body collapse">
            <div class="panel-body">
                <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1Three">
                    Accordion Title 3
                </a>
            </h4>
        </div>
        <div id="collapse1Three" class="accordion-body collapse">
            <div class="panel-body">
                <p>Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.</p>
            </div>
        </div>
    </div>
</div>

Colors

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Small

Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Default

Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Large

Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.

Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien. Praesent id enim sit amet odio vulputate eleifend in in tortor. Donec tellus massa, tristique sit amet condim vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.

Newsletter

Keep up on our always evolving product features and technology. Enter your e-mail and subscribe to our newsletter.

About Our Company

Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu nam sapien stibulum ridiculus pellentesque eros!

Get in touch

  • Address: 1234 Street, United States

  • Phone: (123) 456-7890

  • Email: mail@example.com