Tabs & Accordion

HTML Shortcode
Add Text/HTML module to the page with the below HTML content.
Enter Title
  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
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
<div class="tabs">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#popularPosts" data-toggle="tab"><em class="icon icon-star">
                </em>Popular</a></li>
                <li><a href="#recentPosts" data-toggle="tab">Recent</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="popularPosts">
                    <ul class="simple-post-list">
                        <li>
                            <div class="post-image">
                                <div class="img-thumbnail">
                                    <a href="#">
                                        <img alt="" src="/Portals/Sherpa Expeditions/img/blog/blog-thumb-1.jpg" />
                                    </a>
                                </div>
                            </div>
                            <div class="post-info">
                                <a href="#">Nullam Vitae Nibh Un Odiosters</a>
                                <div class="post-meta">
                                    Jan 10, 2013
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="post-image">
                                <div class="img-thumbnail">
                                    <a href="#l">
                                        <img alt="" src="/Portals/Sherpa Expeditions/img/blog/blog-thumb-2.jpg" />
                                    </a>
                                </div>
                            </div>
                            <div class="post-info">
                                <a href="blog-single.html">Vitae Nibh Un Odiosters</a>
                                <div class="post-meta">
                                    Jan 10, 2013
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="post-image">
                                <div class="img-thumbnail">
                                    <a href="#">
                                        <img alt="" src="/Portals/Sherpa Expeditions/img/blog/blog-thumb-3.jpg" />
                                    </a>
                                </div>
                            </div>
                            <div class="post-info">
                                <a href="#">Odiosters Nullam Vitae</a>
                                <div class="post-meta">
                                    Jan 10, 2013
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="tab-pane" id="recentPosts">
                    <ul class="simple-post-list">
                        <li>
                            <div class="post-image">
                                <div class="img-thumbnail">
                                    <a href="#">
                                        <img alt="" src="/Portals/Sherpa Expeditions/img/blog/blog-thumb-2.jpg" />
                                    </a>
                                </div>
                            </div>
                            <div class="post-info">
                                <a href="#">Vitae Nibh Un Odiosters</a>
                                <div class="post-meta">
                                    Jan 10, 2013
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="post-image">
                                <div class="img-thumbnail">
                                    <a href="#">
                                        <img alt="" src="/Portals/Sherpa Expeditions/img/blog/blog-thumb-3.jpg" />
                                    </a>
                                </div>
                            </div>
                            <div class="post-info">
                                <a href="#">Odiosters Nullam Vitae</a>
                                <div class="post-meta">
                                    Jan 10, 2013
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="post-image">
                                <div class="img-thumbnail">
                                    <a href="#">
                                        <img alt="" src="/Portals/Sherpa Expeditions/img/blog/blog-thumb-1.jpg" />
                                    </a>
                                </div>
                            </div>
                            <div class="post-info">
                                <a href="#">Nullam Vitae Nibh Un Odiosters</a>
                                <div class="post-meta">
                                    Jan 10, 2013
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

Toggle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor, orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit, pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa. Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna, ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio, ac pulvinar felis quam sit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor, orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit, pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa. Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna, ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio, ac pulvinar felis quam sit.

Text/HTML
 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<div class="toogle">
    <section class="toggle active">
    <label>
        Curabitur eget leo at velit imperdiet vague iaculis vitaes?</label>
    <div class="toggle-content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque
            neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a>
            lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet.</p>
        <img src="img/system.jpg" class="responsive pull-left">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque
            neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a>
            lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In
            eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus
            orci luctus et ultrices posuere cubilia Curae;
        </p>
    </div>
    </section>
    <section class="toggle">
    <label>
        Curabitur eget leo at imperdiet vague iaculis vitaes?</label>
    <div class="toggle-content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit
            imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam
            tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit
            amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor,
            orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat
            lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit,
            pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis
            ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa.
            Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna,
            ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas
            at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio,
            ac pulvinar felis quam sit.</p>
    </div>
    </section>
    <section class="toggle">
    <label>
        Curabitur eget leo at velit imperdiet vague iaculis vitaes?</label>
    <div class="toggle-content">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit
            imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam
            tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit
            amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor,
            orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat
            lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit,
            pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis
            ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa.
            Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna,
            ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas
            at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio,
            ac pulvinar felis quam sit.</p>
    </div>
    </section>
</div>
Accordion
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 condimentum vel, facilisis quis sapien.
Donec tellus massa, tristique sit amet condimentum vel, facilisis quis sapien.
One Toggle Open At A Time

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor, orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit, pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa. Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna, ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio, ac pulvinar felis quam sit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam tortor nunc, bibendum vitae semper a, volutpat eget massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla, orci sit amet posuere auctor, orci eros pellentesque odio, nec pellentesque erat ligula nec massa. Aenean consequat lorem ut felis ullamcorper posuere gravida tellus faucibus. Maecenas dolor elit, pulvinar eu vehicula eu, consequat et lacus. Duis et purus ipsum. In auctor mattis ipsum id molestie. Donec risus nulla, fringilla a rhoncus vitae, semper a massa. Vivamus ullamcorper, enim sit amet consequat laoreet, tortor tortor dictum urna, ut egestas urna ipsum nec libero. Nulla justo leo, molestie vel tempor nec, egestas at massa. Aenean pulvinar, felis porttitor iaculis pulvinar, odio orci sodales odio, ac pulvinar felis quam sit.