Menu
> Shortcodes  >  Shortcodes 1  >  Tabs

Tabs

Tucson is a very powerful DNN Theme, you will be able to create an awesome website in a very simple way. View More

  • Address: 123 Street Name, City, USA

  • Phone: (123) 456-7890

  • Email: mail@example.com

About Our Company

Top Minimize

Recent

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

HTML Shortcode Minimize
 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
<div class="tabs">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#popular" data-toggle="tab"><i class="fa fa-star"></i>Popular</a>
        </li>
        <li><a href="#recent" data-toggle="tab">Recent</a> </li>
    </ul>
    <div class="tab-content">
        <div id="popular" class="tab-pane active">
            <p>
                Popular</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitat.</p>
        </div>
        <div id="recent" class="tab-pane">
            <p>
                Recent</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitat.</p>
        </div>
    </div>
</div>

Bottom Minimize

Popular

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

Recent

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

HTML Shortcode Minimize
 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
<div class="tabs tabs-bottom">
    <div class="tab-content">
        <div id="popular13" class="tab-pane active">
            <p>
                Popular</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitat.</p>
        </div>
        <div id="recent13" class="tab-pane">
            <p>
                Recent</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitat.</p>
        </div>
    </div>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#popular13" data-toggle="tab"><i class="fa fa-star"></i>
            Popular</a> </li>
        <li><a href="#recent13" data-toggle="tab">Recent</a> </li>
    </ul>
</div>

Justified Minimize

Popular

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

Recent

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

HTML Shortcode Minimize
 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
<div class="tabs">
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#popular10" data-toggle="tab" class="text-center"><i
            class="fa fa-star"></i>Popular</a> </li>
        <li><a href="#recent10" data-toggle="tab" class="text-center">Recent</a> </li>
    </ul>
    <div class="tab-content">
        <div id="popular10" class="tab-pane active">
            <p>
                Popular</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitat.</p>
        </div>
        <div id="recent10" class="tab-pane">
            <p>
                Recent</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitat.</p>
        </div>
    </div>
</div>

Vertical Minimize

Popular

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

Recent

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

HTML Shortcode Minimize
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="tabs tabs-vertical tabs-left">
    <ul class="nav nav-tabs col-sm-3">
        <li class="active"><a href="#popular11" data-toggle="tab">Popular</a> </li>
        <li><a href="#recent11" data-toggle="tab">Recent</a> </li>
    </ul>
    <div class="tab-content">
        <div id="popular11" class="tab-pane active">
            <p>
                Popular</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitat.</p>
        </div>
        <div id="recent11" class="tab-pane">
            <p>
                Recent</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitat.</p>
        </div>
    </div>
</div>
  Minimize

Popular

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

Recent

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

HTML Shortcode Minimize
 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
<div class="tabs">
    <ul class="nav nav-tabs text-right tabs-primary">
        <li class="active"><a href="#popular7" data-toggle="tab"><i class="fa fa-star"></i>Popular</a>
        </li>
        <li><a href="#recent7" data-toggle="tab">Recent</a> </li>
    </ul>
    <div class="tab-content">
        <div id="popular7" class="tab-pane active">
            <p>
                Popular</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitat.</p>
        </div>
        <div id="recent7" class="tab-pane">
            <p>
                Recent</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitat.</p>
        </div>
    </div>
</div>

  Minimize

Popular

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

Recent

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

HTML Shortcode Minimize
 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
<div class="tabs tabs-bottom tabs-primary">
    <div class="tab-content">
        <div id="popular14" class="tab-pane active">
            <p>
                Popular</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitat.</p>
        </div>
        <div id="recent14" class="tab-pane">
            <p>
                Recent</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitat.</p>
        </div>
    </div>
    <ul class="nav nav-tabs nav-right">
        <li class="active"><a href="#popular14" data-toggle="tab"><i class="fa fa-star"></i>
            Popular</a> </li>
        <li><a href="#recent14" data-toggle="tab">Recent</a> </li>
    </ul>
</div>

  Minimize

Popular

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

Recent

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

HTML Shortcode Minimize
 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
<div class="tabs tabs-bottom tabs-primary">
    <div class="tab-content">
        <div id="popular8" class="tab-pane active">
            <p>
                Popular</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitat.</p>
        </div>
        <div id="recent8" class="tab-pane">
            <p>
                Recent</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitat.</p>
        </div>
    </div>
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#popular8" data-toggle="tab" class="text-center"><i class="fa fa-star">
        </i>Popular</a> </li>
        <li><a href="#recent8" data-toggle="tab" class="text-center">Recent</a> </li>
    </ul>
</div>

  Minimize

Popular

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

Recent

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.

HTML Shortcode Minimize
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="tabs tabs-vertical tabs-right tabs-primary">
    <div class="tab-content">
        <div id="popular12" class="tab-pane active">
            <p>
                Popular</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitat.</p>
        </div>
        <div id="recent12" class="tab-pane">
            <p>
                Recent</p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                exercitat.</p>
        </div>
    </div>
    <ul class="nav nav-tabs col-sm-3">
        <li class="active"><a href="#popular12" data-toggle="tab">Popular</a> </li>
        <li><a href="#recent12" data-toggle="tab">Recent</a> </li>
    </ul>
</div>
© 2018 ComplianceEase. All rights reserved.
Legal Notices