TABS

TAB 01
TAB 02
TAB 03

Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui lacus, cursus id eleifend eget, tincidunt nec urna. Pellentesque vestibulum auctor tortor commodo mattis. Maecenas et blandit libero. Vestibulum varius iaculis sagittis. Suspendisse quis nibh sit amet ligula fringilla eleifend in sed libero. Nunc vel tristique massa. Mauris vitae tempus elit. Aliquam sodales mattis nisi vitae accumsan. Maecenas ut venenatis ante. Praesent molestie felis ut eros mollis varius. Pellentesque odio augue, congue id ullamcorper eu, dictum vel orci. Nam sodales lacinia eros non cons.

Curabitur in odio massa. Cras sit amet neque eget sem fringilla sollicitudin sed consectetur risus. Integer vestibulum ante id nibh porta at sollicitudin nisl placerat. Duis id orci quis enim molestie ornare. Morbi mattis gravida semper. Cras vitae vestibulum nunc. Donec eget nisl nisl, eget iaculis tortor. Sed et mauris id massa imperdiet cursus. Nulla vitae odio augue, eu placerat quam. Sed a ipsum mauris. Integer justo tellus, gravida venenatis sagittis quis, lobortis at erat. Phasellus fermentum nibh vel odio sodales sed fermentum odio ultricies.

HTML Shortcode

Add Text/HTML module to the page with the below HTML content.
 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
<div class="module_tabs module_normal_padding">
    <div class="shortcode_tabs type1">
        <div class="all_heads_cont">
            <div class="shortcode_tab_item_title active">
                TAB 01</div>
            <div class="shortcode_tab_item_title">
                TAB 02</div>
            <div class="shortcode_tab_item_title">
                TAB 03</div>
        </div>
        <div class="all_body_cont">
            <div class="shortcode_tab_item_body">
                <div class="ip">
                    <p>
                        Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
                        eros enatis at dapibus facilisis, lacinia sagittis purus. Ut tuismod aliquet enim,
                        nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
                        quis felis. Nunc elementum dolor quis perarcuege tristique viverra. Morbi nec suscipit
                        lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
                        curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets
                        sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets.</p>
                </div>
            </div>
            <div class="shortcode_tab_item_body">
                <div class="ip">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui lacus, cursus id
                        eleifend eget, tincidunt nec urna. Pellentesque vestibulum auctor tortor commodo
                        mattis. Maecenas et blandit libero. Vestibulum varius iaculis sagittis. Suspendisse
                        quis nibh sit amet ligula fringilla eleifend in sed libero. Nunc vel tristique massa.
                        Mauris vitae tempus elit. Aliquam sodales mattis nisi vitae accumsan. Maecenas ut
                        venenatis ante. Praesent molestie felis ut eros mollis varius. Pellentesque odio
                        augue, congue id ullamcorper eu, dictum vel orci. Nam sodales lacinia eros non cons.</p>
                </div>
            </div>
            <div class="shortcode_tab_item_body">
                <div class="ip">
                    <p>
                        Curabitur in odio massa. Cras sit amet neque eget sem fringilla sollicitudin sed
                        consectetur risus. Integer vestibulum ante id nibh porta at sollicitudin nisl placerat.
                        Duis id orci quis enim molestie ornare. Morbi mattis gravida semper. Cras vitae
                        vestibulum nunc. Donec eget nisl nisl, eget iaculis tortor. Sed et mauris id massa
                        imperdiet cursus. Nulla vitae odio augue, eu placerat quam. Sed a ipsum mauris.
                        Integer justo tellus, gravida venenatis sagittis quis, lobortis at erat. Phasellus
                        fermentum nibh vel odio sodales sed fermentum odio ultricies.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
TAB 01
TAB 02
TAB 03

Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis rust Ut tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc imentum dolor quis perarcuege tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices lorem posuere cubilia curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros id dictums Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis rust Ut tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus culist varius vitae, placerat quis felis. Nunc imentum dolor quis perarcuege tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis ins faucibus orci luctus et ultrices lorem posuere cubilia curae nulla, estibulum eget justo sit amet pulvinar convallisist massa turpis egets sed facilisis egs magna eros id dictums arcu. Curabitur suscipit hendrerit egets porttitor. Cras posuere ligula a dui suscipit tempor gravida turpis ultrices. Donec sit amet eleifend urna. Fusce convallis porta vestibulum. Aliquam faucibus lacus sit amet mi ultrices interdum. Suspendisse potenti.

Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis rust Ut tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc imentum dolor quis perarcuege tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices lorem posuere cubilia curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros id dictums Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis rust Ut tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus culist varius vitae, placerat quis felis. Nunc imentum dolor quis perarcuege tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis ins faucibus orci luctus et ultrices lorem posuere cubilia curae nulla, estibulum eget justo sit amet pulvinar convallisist massa turpis egets sed facilisis egs magna eros id dictums arcu. Curabitur suscipit hendrerit egets porttitor. Cras posuere ligula a dui suscipit tempor gravida turpis ultrices. Donec sit amet eleifend urna. Fusce convallis porta vestibulum. Aliquam faucibus lacus sit amet mi ultrices interdum. Suspendisse potenti.

Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis rust Ut tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc imentum dolor quis perarcuege tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis in faucibus orci luctus et ultrices lorem posuere cubilia curae nulla vestibulum eget justo sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros id dictums Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis rust Ut tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus culist varius vitae, placerat quis felis. Nunc imentum dolor quis perarcuege tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis ins faucibus orci luctus et ultrices lorem posuere cubilia curae nulla, estibulum eget justo sit amet pulvinar convallisist massa turpis egets sed facilisis egs magna eros id dictums arcu. Curabitur suscipit hendrerit egets porttitor. Cras posuere ligula a dui suscipit tempor gravida turpis ultrices. Donec sit amet eleifend urna. Fusce convallis porta vestibulum. Aliquam faucibus lacus sit amet mi ultrices interdum. Suspendisse potenti.

HTML Shortcode

Add Text/HTML module to the page with the below HTML content.
 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
<div class="module_tabs">
    <div class="shortcode_tabs type2">
        <div class="all_heads_cont">
            <div class="shortcode_tab_item_title active">
                TAB 01</div>
            <div class="shortcode_tab_item_title">
                TAB 02</div>
            <div class="shortcode_tab_item_title">
                TAB 03</div>
        </div>
        <div class="all_body_cont">
            <div class="shortcode_tab_item_body">
                <div class="ip">
                    <p>
                        Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
                        eros enatis at dapibus facilisis, lacinia sagittis rust Ut tuismod aliquet enim,
                        nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
                        <span class="colored_italic">quis felis</span>. Nunc imentum dolor quis perarcuege
                        tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis in faucibus
                        orci luctus et ultrices lorem posuere cubilia curae nulla vestibulum eget justo
                        sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros id dictums
                        <img alt="" src="/portals/19/Skins/Dixit/PortalTemplate/img/pictures/tab_img1.jpg"
                            class="alignleft" />Pellentesque consequat viverra ipsum, sed placerat ligula
                        aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis rust Ut
                        tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus culist
                        varius vitae, placerat quis felis. Nunc imentum dolor quis perarcuege tristique
                        viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis ins faucibus orci
                        luctus et ultrices lorem posuere cubilia curae nulla, estibulum eget justo sit amet
                        pulvinar convallisist massa turpis egets sed facilisis egs magna eros id dictums
                        arcu. Curabitur suscipit hendrerit egets porttitor. Cras posuere <span class="colored_italic">
                            ligula a dui</span> suscipit tempor gravida turpis ultrices. Donec sit amet
                        eleifend urna. Fusce convallis porta vestibulum. Aliquam faucibus lacus sit amet
                        mi ultrices interdum. Suspendisse potenti.</p>
                </div>
            </div>
            <div class="shortcode_tab_item_body">
                <div class="ip">
                    <p>
                        Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
                        eros enatis at dapibus facilisis, lacinia sagittis rust Ut tuismod aliquet enim,
                        nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
                        <span class="colored_italic">quis felis</span>. Nunc imentum dolor quis perarcuege
                        tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis in faucibus
                        orci luctus et ultrices lorem posuere cubilia curae nulla vestibulum eget justo
                        sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros id dictums
                        <img alt="" src="/portals/19/Skins/Dixit/PortalTemplate/img/pictures/tab_img1.jpg"
                            class="alignright" />Pellentesque consequat viverra ipsum, sed placerat ligula
                        aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis rust Ut
                        tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus culist
                        varius vitae, placerat quis felis. Nunc imentum dolor quis perarcuege tristique
                        viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis ins faucibus orci
                        luctus et ultrices lorem posuere cubilia curae nulla, estibulum eget justo sit amet
                        pulvinar convallisist massa turpis egets sed facilisis egs magna eros id dictums
                        arcu. Curabitur suscipit hendrerit egets porttitor. Cras posuere <span class="colored_italic">
                            ligula a dui</span> suscipit tempor gravida turpis ultrices. Donec sit amet
                        eleifend urna. Fusce convallis porta vestibulum. Aliquam faucibus lacus sit amet
                        mi ultrices interdum. Suspendisse potenti.</p>
                </div>
            </div>
            <div class="shortcode_tab_item_body">
                <div class="ip">
                    <p>
                        Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
                        eros enatis at dapibus facilisis, lacinia sagittis rust Ut tuismod aliquet enim,
                        nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat
                        <span class="colored_italic">quis felis</span>. Nunc imentum dolor quis perarcuege
                        tristique viverra. Morbi nec suscipit lacus vestibulum ante ipsum primis in faucibus
                        orci luctus et ultrices lorem posuere cubilia curae nulla vestibulum eget justo
                        sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros id dictums
                        Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien
                        eros enatis at dapibus facilisis, lacinia sagittis rust Ut tuismod aliquet enim,
                        nec semper mi posuere nec lor nam nunc est, faucibus culist varius vitae, placerat
                        quis felis. Nunc imentum dolor quis perarcuege tristique viverra. Morbi nec suscipit
                        lacus vestibulum ante ipsum primis ins faucibus orci luctus et ultrices lorem posuere
                        cubilia curae nulla, estibulum eget justo sit amet pulvinar convallisist massa turpis
                        egets sed facilisis egs magna eros id dictums arcu. Curabitur suscipit hendrerit
                        egets porttitor. Cras posuere <span class="colored_italic">ligula a dui</span> suscipit
                        tempor gravida turpis ultrices. Donec sit amet eleifend urna. Fusce convallis porta
                        vestibulum. Aliquam faucibus lacus sit amet mi ultrices interdum. Suspendisse potenti.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Implementation Instructions:

To Add or Remove Tabs:
Add or Remove the below HTML content in div having class "all_body_cont".

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="shortcode_tab_item_body">
    <div class="ip">
        <p>
            Curabitur in odio massa. Cras sit amet neque eget sem fringilla sollicitudin sed
            consectetur risus. Integer vestibulum ante id nibh porta at sollicitudin nisl placerat.
            Duis id orci quis enim molestie ornare. Morbi mattis gravida semper. Cras vitae
            vestibulum nunc. Donec eget nisl nisl, eget iaculis tortor. Sed et mauris id massa
            imperdiet cursus. Nulla vitae odio augue, eu placerat quam. Sed a ipsum mauris.
            Integer justo tellus, gravida venenatis sagittis quis, lobortis at erat. Phasellus
            fermentum nibh vel odio sodales sed fermentum odio ultricies.
        </p>
    </div>
</div>

Add or Remove the below HTML content in div having class "all_heads_cont".

1
2
<div class="shortcode_tab_item_title">
    TAB 03</div>