Responsive & Customizable Tabs

Seamless Navigation with Style

Tabs provide a clean and structured way to present related content without overwhelming the user. Our implementation ensures they are fully responsive, mobile-friendly, and easily customizable to match your branding.

Key Features:

Fully Responsive: Our tabs automatically adjust to different screen sizes, providing a smooth and consistent experience across all devices.
Easily Customizable: Tailor the appearance and behavior of the tabs to fit your brand's style. With extensive customization options, you can modify colors, fonts, spacing, and animations effortlessly.
Smooth Animations: Enhance user interaction with smooth transitions and hover effects that make navigation engaging and enjoyable.
Simple Integration: Integrating our tabs into your website is straightforward, with clean and well-documented code that makes setup a breeze.
Cross-Browser Compatibility: Our tabs are tested to work seamlessly across all major browsers, ensuring that your users get the best experience regardless of their preferred platform.

General Tabs

Organize Content with Clarity

General Tabs are ideal for structuring content into separate, easy-to-navigate sections. This standard tab layout helps users view grouped information without page reloads, making for a smoother experience.

Showing Tab Content 0

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Showing Tab Content 1

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Showing Tab Content 2

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Showing Tab Content 3

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Showing Tab Content 4

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Source Code


// Basic HTML Structure for Tabs
<div id="TabExampleCr"> //id ="YourId"+"Cr"

    <div id="TabExampleLk" class=" "> //id ="YourId"+"Lk"
        <div class="">Tab0</div>
        <div class="">Tab1</div>
        <div class="">Tab2</div>
    </div>
    <div id="TabExampleCt"> //id ="YourId"+"Ct"
        <div id="TabExampleCt0" class=" ">  </div>//id ="YourId"+"Ct"+"0"
        <div id="TabExampleCt1" class=" ">  </div>//id ="YourId"+"Ct"+"1"
        <div id="TabExampleCt2" class=" ">  </div>//id ="YourId"+"Ct"+"2"
    </div>

</div>


<script>
    document.addEventListener("DOMContentLoaded", function (){
    CT.TbCt({
            Id: 'TabExample', // Tabs Prefix we Chose
            Active: 0, // On 1st Load Tab 0 will be active
            Disable: [1,2],//Array Of that will be Disabled at start.
            Hide: [3],//Array Of that will be Disabled at start.
            NavAlign: 'Top',    //[ default is Top, Right,Left,Bottom]
            NavWidthPercent: 23, //[default is the 20]
            NavLinkHeightPx: 40, //[default is 28 px]
            NavScroll:'N',       //[default is 'Y']
            ClBkFn: { 0: CallBack0, 2: CallBack2 },//0,2 DenotesTablink will call CallbAck0 & Callback2 respectively.
        });
    function CallBack0() {
        alert(0);
    }
    function CallBack2() {
        alert(2);
    }
    });
</script>

Detailed Explanation Of HTML Structure and their id.

1). id="TabExampleCr" :

Main div of the Tab Container, id prefix is 'TabExample'(you can choose your own prefix) and suffix Cr is mandatory.
Note: Cr is generated from Container first and last letter that is 'C' and 'r'.

2). id="TabExampleLk" :

Then Starts Link div, id prefix is same i.e. 'TabExample' and suffix Lk is mandatory.
Note: Lk is generated from Link first and last letter that is 'L' and 'k'.

3). id="TabExampleCt" :

Then Starts Content div, id prefix is same i.e. 'TabExample' and suffix Ct is mandatory.
Note:Ct is generated from Content first and last letter that is 'C' and 't'.

4). id="TabExampleCt0" :

Then Starts Content child div, id prefix is same i.e. 'TabExample' and suffix Ct appended
with Link Count starting from 0 & count is mandatory.

5). Note :

Empty Classes signifies to add classes of your own choice hence easily customisable.

Colorful Tabs

Showing Tab Content 0

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Showing Tab Content 1

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Showing Tab Content 2

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Showing Tab Content 3

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Showing Tab Content 4

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Source Code


// Basic HTML Structure for Tabs
<div id="TabColorfulCr">
    <div id="TabColorfulLk" class="BrTp1 BrLt1 BrRt1 CrBrTe">
        <div class="CrBdGn">0 - Active</div>
        <div class="CrBdRd">1 - Disabled</div>
        <div class="CrBdYw">2 - Hidden</div>
        <div class="CrBdPk">3 - Responsive</div>
        <div class="CrBdBe">4 - Responsive</div>
    </div>
    <div id="TabColorfulCt">

        <div id="TabColorfulCt0" class="Br1 CrBrTe">
            <div class="Pg10">

                <div class="PgLt10 HtMn50vh DyFx FxDnCn">


                    <div class="FxGw1">
                        <h2 class="MnTpBm10">Showing Tab Content 0</h2>

                        <h3 class="MnTpBm10">
                            Colorful Tabs are very easily customizable.
                        </h3>
                        <ul>
                            <li>Enable Tab 1 Button Enable the 1st Tab which is Disabled.</li>
                            <li>Show Tab 2 Button Show the 2nd Tab which is Hide right now.</li>
                            <li>Hide Tab 2 Button Hide the Tab 2</li>
                            <li>Show Tab 3 Button Show the 3rd Tab.</li>
                            <li>Show Tab 4 Button Show the 4th Tab.</li>


                        </ul>
                    </div>

                    <div class="Wh100p Pg10 ">
                        <div class="DyFx  PgTpBm5 FxWp">
                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrBn CrBdBn30 CrBn Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:1})">Enable Tab 1</button>
                            </div>
                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:2})">Show Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbHe({Id:'TabColorful',Hide:[2]} )">Hide Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrGn CrBdGn30 CrGn Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:3})">Show Tab 3</button>
                            </div>
                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrOe CrBdOe30 CrOe Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:4})">Show Tab 4</button>
                            </div>


                        </div>
                    </div>



                </div>
            </div>
        </div>

        <div id="TabColorfulCt1" class="Br1 CrBrTe">
            <div class="Pg10">

                <div class="PgLt10 HtMn50vh DyFx FxDnCn">


                    <div class="FxGw1">
                        <h2 class="MnTpBm10">Showing Tab Content 1</h2>

                        <h3 class="MnTpBm10">
                            Colorful Tabs are very easily customizable.
                        </h3>
                        <ul>
                            <li>Enable Tab 1 Button Enable the 1st Tab which is Disabled.</li>
                            <li>Show Tab 2 Button Show the 2nd Tab which is Hide right now.</li>
                            <li>Hide Tab 2 Button Hide the Tab 2</li>
                            <li>Show Tab 3 Button Show the 3rd Tab.</li>
                            <li>Show Tab 4 Button Show the 4th Tab.</li>
                        </ul>
                    </div>

                    <div class="Wh100p Pg10 ">
                        <div class="DyFx  PgTpBm5 FxWp FxAnIsSh">
                            <div class="DyFx FxWhHf15 Pg5 ">
                                <button type="button" class="Bn Br2 CrBrBe CrBdBe30 CrBe Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:0})">Show Tab 0</button>
                            </div>
                            <div class="DyFx FxWhHf15 Pg5 ">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:2})">Show Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf15 Pg5 ">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbHe({Id:'TabColorful',Hide:[2]} )">Hide Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf15 Pg5 ">
                                <button type="button" class="Bn Br2 CrBrGn CrBdGn30 CrGn Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:3})">Show Tab 3</button>
                            </div>
                            <div class="DyFx FxWhHf15 Pg5 ">
                                <button type="button" class="Bn Br2 CrBrOe CrBdOe30 CrOe Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:4})">Show Tab 4</button>
                            </div>


                        </div>
                    </div>



                </div>
            </div>
        </div>

        <div id="TabColorfulCt2" class="Br1 CrBrTe">
            <div class="Pg10">

                <div class="PgLt10 HtMn50vh DyFx FxDnCn">


                    <div class="FxGw1">
                        <h2 class="MnTpBm10">Showing Tab Content 2</h2>

                        <h3 class="MnTpBm10">
                            Colorful Tabs are very easily customizable.
                        </h3>
                        <ul>
                            <li>Enable Tab 1 Button Enable the 1st Tab which is Disabled.</li>
                            <li>Show Tab 2 Button Show the 2nd Tab which is Hide right now.</li>
                            <li>Hide Tab 2 Button Hide the Tab 2</li>
                            <li>Show Tab 3 Button Show the 3rd Tab.</li>
                            <li>Show Tab 4 Button Show the 4th Tab.</li>
                        </ul>
                    </div>

                    <div class="Wh100p Pg10 ">
                        <div class="DyFx  PgTpBm5 FxWp">
                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrBe CrBdBe30 CrBe Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:0})">Show Tab 0</button>
                            </div>
                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrBn CrBdBn30 CrBn Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:1})">Enable Tab 1</button>
                            </div>

                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrGn CrBdGn30 CrGn Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:3})">Show Tab 3</button>
                            </div>
                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrOe CrBdOe30 CrOe Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:4})">Show Tab 4</button>
                            </div>


                        </div>
                    </div>



                </div>
            </div>
        </div>

        <div id="TabColorfulCt3" class="Br1 CrBrTe">
            <div class="Pg10">

                <div class="PgLt10 HtMn50vh DyFx FxDnCn">


                    <div class="FxGw1">
                        <h2 class="MnTpBm10">Showing Tab Content 3</h2>

                        <h3 class="MnTpBm10">
                            Colorful Tabs are very easily customizable.
                        </h3>
                        <ul>
                            <li>Enable Tab 1 Button Enable the 1st Tab which is Disabled.</li>
                            <li>Show Tab 2 Button Show the 2nd Tab which is Hide right now.</li>
                            <li>Hide Tab 2 Button Hide the Tab 2</li>
                            <li>Show Tab 3 Button Show the 3rd Tab.</li>
                            <li>Show Tab 4 Button Show the 4th Tab.</li>
                        </ul>
                    </div>

                    <div class="Wh100p Pg10 ">
                        <div class="DyFx  PgTpBm5 FxWp">
                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrBe CrBdBe30 CrBe Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:0})">Show Tab 0</button>
                            </div>
                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrBn CrBdBn30 CrBn Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:1})">Enable Tab 1</button>
                            </div>

                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:2})">Show Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbHe({Id:'TabColorful',Hide:[2]} )">Hide Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrOe CrBdOe30 CrOe Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:4})">Show Tab 4</button>
                            </div>


                        </div>
                    </div>


                </div>
            </div>
        </div>

        <div id="TabColorfulCt4" class="Br1 CrBrTe">
            <div class="Pg10">

                <div class="PgLt10 HtMn50vh DyFx FxDnCn">


                    <div class="FxGw1">
                        <h2 class="MnTpBm10">Showing Tab Content 4</h2>

                        <h3 class="MnTpBm10">
                            Colorful Tabs are very easily customizable.
                        </h3>
                        <ul>
                            <li>Enable Tab 1 Button Enable the 1st Tab which is Disabled.</li>
                            <li>Show Tab 2 Button Show the 2nd Tab which is Hide right now.</li>
                            <li>Hide Tab 2 Button Hide the Tab 2</li>
                            <li>Show Tab 3 Button Show the 3rd Tab.</li>
                            <li>Show Tab 4 Button Show the 4th Tab.</li>
                        </ul>
                    </div>

                    <div class="Wh100p Pg10 ">
                        <div class="DyFx  PgTpBm5 FxWp">
                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrBe CrBdBe30 CrBe Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:0})">Show Tab 0</button>
                            </div>
                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrBn CrBdBn30 CrBn Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:1})">Enable Tab 1</button>
                            </div>

                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:2})">Show Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbHe({Id:'TabColorful',Hide:[2]} )">Hide Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf15 Pg5">
                                <button type="button" class="Bn Br2 CrBrGn CrBdGn30 CrGn Wh100p" onclick="CT.TbAe({Id:'TabColorful', Active:3})">Show Tab 3</button>
                            </div>


                        </div>
                    </div>





                </div>
            </div>
        </div>

    </div>
</div>


<script>
    document.addEventListener("DOMContentLoaded", function (){
        CT.TbCt({
            Id: 'TabColorful',
            Active: 0,
            Disable: [1],
            Hide: [2],
            NavAlign: 'Top',    //[ default is Top, Right,Left,Bottom]
            NavWidthPercent: 28, //[default is the 20]
            NavLinkHeightPx: 40, //[default is 28 px]
            //NavScroll:'N',       //[default is 'Y']
            //ClBkFn: { 0: CallBack0, 2: CallBack2 },//0,2 DenotesTablink will call CallbAck0 & Callback2 respectively.

        });
    });
</script>

Colorful Tabs

Left Side Link Tabs

0 - ActiveTab0

1 - DisabledTab1

2 - HiddenTab2

3 - ResponsiveTab3

4 - ResponsiveTab4

Showing Tab Content 0

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Showing Tab Content 1

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Showing Tab Content 2

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Showing Tab Content 3

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Showing Tab Content 4

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Source Code


<div id="TabSideCr">
    <div id="TabSideLk" class="BrTp1 BrLt1 BrRt1 CrBrTe">
        <div><span class="VwOyDp">0 - Active</span><span class="VwOyMeTb">Tab0</span></div>
        <div><span class="VwOyDp">1 - Disabled</span><span class="VwOyMeTb">Tab1</span></div>
        <div><span class="VwOyDp">2 - Hidden</span><span class="VwOyMeTb">Tab2</span></div>
        <div><span class="VwOyDp">3 - Responsive</span><span class="VwOyMeTb">Tab3</span> </div>
        <div><span class="VwOyDp">4 - Responsive</span><span class="VwOyMeTb">Tab4</span></div>
    </div>
    <div id="TabSideCt">

        <div id="TabSideCt0" class="Br1 CrBrTe">
            <div class="Pg10">

                <div class="PgLt10 HtMn50vh DyFx FxDnCn">


                    <div class="FxGw1">
                        <h2 class="MnTpBm10">Showing Tab Content 0</h2>

                        <h3 class="MnTpBm10">
                            Colorful Tabs are very easily customizable.
                        </h3>
                        <ul>
                            <li>Enable Tab 1 Button Enable the 1st Tab which is Disabled.</li>
                            <li>Show Tab 2 Button Show the 2nd Tab which is Hide right now.</li>
                            <li>Hide Tab 2 Button Hide the Tab 2</li>
                            <li>Show Tab 3 Button Show the 3rd Tab.</li>
                            <li>Show Tab 4 Button Show the 4th Tab.</li>


                        </ul>
                    </div>

                    <div class="Wh100p Pg10 ">
                        <div class="DyFx  PgTpBm5 FxWp">
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrBn CrBdBn30 CrBn Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:1})">Enable Tab 1</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:2})">Show Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbHe({Id:'TabSide',Hide:[2]} )">Hide Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGn CrBdGn30 CrGn Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:3})">Show Tab 3</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrOe CrBdOe30 CrOe Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:4})">Show Tab 4</button>
                            </div>


                        </div>
                    </div>



                </div>
            </div>
        </div>

        <div id="TabSideCt1" class="Br1 CrBrTe">
            <div class="Pg10">

                <div class="PgLt10 HtMn50vh DyFx FxDnCn">


                    <div class="FxGw1">
                        <h2 class="MnTpBm10">Showing Tab Content 1</h2>

                        <h3 class="MnTpBm10">
                            Colorful Tabs are very easily customizable.
                        </h3>
                        <ul>
                            <li>Enable Tab 1 Button Enable the 1st Tab which is Disabled.</li>
                            <li>Show Tab 2 Button Show the 2nd Tab which is Hide right now.</li>
                            <li>Hide Tab 2 Button Hide the Tab 2</li>
                            <li>Show Tab 3 Button Show the 3rd Tab.</li>
                            <li>Show Tab 4 Button Show the 4th Tab.</li>
                        </ul>
                    </div>

                    <div class="Wh100p Pg10 ">
                        <div class="DyFx  PgTpBm5 FxWp FxAnIsSh">
                            <div class="DyFx FxWhHf20 Pg5 ">
                                <button type="button" class="Bn Br2 CrBrBe CrBdBe30 CrBe Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:0})">Show Tab 0</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5 ">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:2})">Show Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5 ">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbHe({Id:'TabSide',Hide:[2]} )">Hide Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5 ">
                                <button type="button" class="Bn Br2 CrBrGn CrBdGn30 CrGn Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:3})">Show Tab 3</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5 ">
                                <button type="button" class="Bn Br2 CrBrOe CrBdOe30 CrOe Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:4})">Show Tab 4</button>
                            </div>


                        </div>
                    </div>



                </div>
            </div>
        </div>

        <div id="TabSideCt2" class="Br1 CrBrTe">
            <div class="Pg10">

                <div class="PgLt10 HtMn50vh DyFx FxDnCn">


                    <div class="FxGw1">
                        <h2 class="MnTpBm10">Showing Tab Content 2</h2>

                        <h3 class="MnTpBm10">
                            Colorful Tabs are very easily customizable.
                        </h3>
                        <ul>
                            <li>Enable Tab 1 Button Enable the 1st Tab which is Disabled.</li>
                            <li>Show Tab 2 Button Show the 2nd Tab which is Hide right now.</li>
                            <li>Hide Tab 2 Button Hide the Tab 2</li>
                            <li>Show Tab 3 Button Show the 3rd Tab.</li>
                            <li>Show Tab 4 Button Show the 4th Tab.</li>
                        </ul>
                    </div>

                    <div class="Wh100p Pg10 ">
                        <div class="DyFx  PgTpBm5 FxWp">
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrBe CrBdBe30 CrBe Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:0})">Show Tab 0</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrBn CrBdBn30 CrBn Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:1})">Enable Tab 1</button>
                            </div>

                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGn CrBdGn30 CrGn Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:3})">Show Tab 3</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrOe CrBdOe30 CrOe Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:4})">Show Tab 4</button>
                            </div>


                        </div>
                    </div>



                </div>
            </div>
        </div>

        <div id="TabSideCt3" class="Br1 CrBrTe">
            <div class="Pg10">

                <div class="PgLt10 HtMn50vh DyFx FxDnCn">


                    <div class="FxGw1">
                        <h2 class="MnTpBm10">Showing Tab Content 3</h2>

                        <h3 class="MnTpBm10">
                            Colorful Tabs are very easily customizable.
                        </h3>
                        <ul>
                            <li>Enable Tab 1 Button Enable the 1st Tab which is Disabled.</li>
                            <li>Show Tab 2 Button Show the 2nd Tab which is Hide right now.</li>
                            <li>Hide Tab 2 Button Hide the Tab 2</li>
                            <li>Show Tab 3 Button Show the 3rd Tab.</li>
                            <li>Show Tab 4 Button Show the 4th Tab.</li>
                        </ul>
                    </div>

                    <div class="Wh100p Pg10 ">
                        <div class="DyFx  PgTpBm5 FxWp">
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrBe CrBdBe30 CrBe Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:0})">Show Tab 0</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrBn CrBdBn30 CrBn Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:1})">Enable Tab 1</button>
                            </div>

                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:2})">Show Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbHe({Id:'TabSide',Hide:[2]} )">Hide Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrOe CrBdOe30 CrOe Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:4})">Show Tab 4</button>
                            </div>


                        </div>
                    </div>


                </div>
            </div>
        </div>

        <div id="TabSideCt4" class="Br1 CrBrTe">
            <div class="Pg10">

                <div class="PgLt10 HtMn50vh DyFx FxDnCn">


                    <div class="FxGw1">
                        <h2 class="MnTpBm10">Showing Tab Content 4</h2>

                        <h3 class="MnTpBm10">
                            Colorful Tabs are very easily customizable.
                        </h3>
                        <ul>
                            <li>Enable Tab 1 Button Enable the 1st Tab which is Disabled.</li>
                            <li>Show Tab 2 Button Show the 2nd Tab which is Hide right now.</li>
                            <li>Hide Tab 2 Button Hide the Tab 2</li>
                            <li>Show Tab 3 Button Show the 3rd Tab.</li>
                            <li>Show Tab 4 Button Show the 4th Tab.</li>
                        </ul>
                    </div>

                    <div class="Wh100p Pg10 ">
                        <div class="DyFx  PgTpBm5 FxWp">
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrBe CrBdBe30 CrBe Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:0})">Show Tab 0</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrBn CrBdBn30 CrBn Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:1})">Enable Tab 1</button>
                            </div>

                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:2})">Show Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbHe({Id:'TabSide',Hide:[2]} )">Hide Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGn CrBdGn30 CrGn Wh100p" onclick="CT.TbAe({Id:'TabSide', Active:3})">Show Tab 3</button>
                            </div>


                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>


<script>
    document.addEventListener("DOMContentLoaded", function (){
        CT.TbCt({
            Id: 'TabSide',
            Active: 0,
            Disable: [1],
            Hide: [2],
            NavAlign: 'Left',    //[ default is Top, Right,Left,Bottom]
            NavWidthPercent: 28, //[default is the 20]
            NavLinkHeightPx: 40, //[default is 28 px]
            //NavScroll:'N',       //[default is 'Y']
            //ClBkFn: { 0: CallBack0, 2: CallBack2 },//0,2 DenotesTablink will call CallbAck0 & Callback2 respectively.

        });
    });
</script>

Colorful Tabs

Right Side Link Tabs

0 - ActiveTab0

1 - DisabledTab1

2 - HiddenTab2

3 - ResponsiveTab3

4 - ResponsiveTab4

Showing Tab Content 0

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Showing Tab Content 1

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Showing Tab Content 2

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Showing Tab Content 3

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Showing Tab Content 4

Colorful Tabs are very easily customizable.

Enable Tab 1 Button Enable the 1st Tab which is Disabled.
Show Tab 2 Button Show the 2nd Tab which is Hide right now.
Hide Tab 2 Button Hide the Tab 2
Show Tab 3 Button Show the 3rd Tab.
Show Tab 4 Button Show the 4th Tab.

Source Code


<div id="TabSideRightAlignCr">
    <div id="TabSideRightAlignLk" class="BrTp1 BrLt1 BrRt1 CrBrTe">
        <div><span class="VwOyDp">0 - Active</span><span class="VwOyMeTb">Tab0</span></div>
        <div><span class="VwOyDp">1 - Disabled</span><span class="VwOyMeTb">Tab1</span></div>
        <div><span class="VwOyDp">2 - Hidden</span><span class="VwOyMeTb">Tab2</span></div>
        <div><span class="VwOyDp">3 - Responsive</span><span class="VwOyMeTb">Tab3</span> </div>
        <div><span class="VwOyDp">4 - Responsive</span><span class="VwOyMeTb">Tab4</span> </div>
    </div>
    <div id="TabSideRightAlignCt">

        <div id="TabSideRightAlignCt0" class="Br1 CrBrTe">
            <div class="Pg10">

                <div class="PgLt10 HtMn50vh DyFx FxDnCn">

                    <div class="FxGw1">
                        <h2 class="MnTpBm10">Showing Tab Content 0</h2>

                        <h3 class="MnTpBm10">
                            Colorful Tabs are very easily customizable.
                        </h3>
                        <ul>
                            <li>Enable Tab 1 Button Enable the 1st Tab which is Disabled.</li>
                            <li>Show Tab 2 Button Show the 2nd Tab which is Hide right now.</li>
                            <li>Hide Tab 2 Button Hide the Tab 2</li>
                            <li>Show Tab 3 Button Show the 3rd Tab.</li>
                            <li>Show Tab 4 Button Show the 4th Tab.</li>
                        </ul>
                    </div>

                    <div class="Wh100p Pg10 ">
                        <div class="DyFx  PgTpBm5 FxWp">
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrBn CrBdBn30 CrBn Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:1})">Enable Tab 1</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:2})">Show Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbHe({Id:'TabSideRightAlign',Hide:[2]} )">Hide Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGn CrBdGn30 CrGn Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:3})">Show Tab 3</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrOe CrBdOe30 CrOe Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:4})">Show Tab 4</button>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div id="TabSideRightAlignCt1" class="Br1 CrBrTe">
            <div class="Pg10">

                <div class="PgLt10 HtMn50vh DyFx FxDnCn">


                    <div class="FxGw1">
                        <h2 class="MnTpBm10">Showing Tab Content 1</h2>

                        <h3 class="MnTpBm10">
                            Colorful Tabs are very easily customizable.
                        </h3>
                        <ul>
                            <li>Enable Tab 1 Button Enable the 1st Tab which is Disabled.</li>
                            <li>Show Tab 2 Button Show the 2nd Tab which is Hide right now.</li>
                            <li>Hide Tab 2 Button Hide the Tab 2</li>
                            <li>Show Tab 3 Button Show the 3rd Tab.</li>
                            <li>Show Tab 4 Button Show the 4th Tab.</li>
                        </ul>
                    </div>

                    <div class="Wh100p Pg10 ">
                        <div class="DyFx  PgTpBm5 FxWp FxAnIsSh">
                            <div class="DyFx FxWhHf20 Pg5 ">
                                <button type="button" class="Bn Br2 CrBrBe CrBdBe30 CrBe Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:0})">Show Tab 0</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5 ">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:2})">Show Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5 ">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbHe({Id:'TabSideRightAlign',Hide:[2]} )">Hide Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5 ">
                                <button type="button" class="Bn Br2 CrBrGn CrBdGn30 CrGn Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:3})">Show Tab 3</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5 ">
                                <button type="button" class="Bn Br2 CrBrOe CrBdOe30 CrOe Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:4})">Show Tab 4</button>
                            </div>


                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div id="TabSideRightAlignCt2" class="Br1 CrBrTe">
            <div class="Pg10">

                <div class="PgLt10 HtMn50vh DyFx FxDnCn">


                    <div class="FxGw1">
                        <h2 class="MnTpBm10">Showing Tab Content 2</h2>

                        <h3 class="MnTpBm10">
                            Colorful Tabs are very easily customizable.
                        </h3>
                        <ul>
                            <li>Enable Tab 1 Button Enable the 1st Tab which is Disabled.</li>
                            <li>Show Tab 2 Button Show the 2nd Tab which is Hide right now.</li>
                            <li>Hide Tab 2 Button Hide the Tab 2</li>
                            <li>Show Tab 3 Button Show the 3rd Tab.</li>
                            <li>Show Tab 4 Button Show the 4th Tab.</li>
                        </ul>
                    </div>

                    <div class="Wh100p Pg10 ">
                        <div class="DyFx  PgTpBm5 FxWp">
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrBe CrBdBe30 CrBe Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:0})">Show Tab 0</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrBn CrBdBn30 CrBn Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:1})">Enable Tab 1</button>
                            </div>

                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGn CrBdGn30 CrGn Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:3})">Show Tab 3</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrOe CrBdOe30 CrOe Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:4})">Show Tab 4</button>
                            </div>


                        </div>
                    </div>



                </div>
            </div>
        </div>

        <div id="TabSideRightAlignCt3" class="Br1 CrBrTe">
            <div class="Pg10">

                <div class="PgLt10 HtMn50vh DyFx FxDnCn">


                    <div class="FxGw1">
                        <h2 class="MnTpBm10">Showing Tab Content 3</h2>

                        <h3 class="MnTpBm10">
                            Colorful Tabs are very easily customizable.
                        </h3>
                        <ul>
                            <li>Enable Tab 1 Button Enable the 1st Tab which is Disabled.</li>
                            <li>Show Tab 2 Button Show the 2nd Tab which is Hide right now.</li>
                            <li>Hide Tab 2 Button Hide the Tab 2</li>
                            <li>Show Tab 3 Button Show the 3rd Tab.</li>
                            <li>Show Tab 4 Button Show the 4th Tab.</li>
                        </ul>
                    </div>

                    <div class="Wh100p Pg10 ">
                        <div class="DyFx  PgTpBm5 FxWp">
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrBe CrBdBe30 CrBe Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:0})">Show Tab 0</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrBn CrBdBn30 CrBn Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:1})">Enable Tab 1</button>
                            </div>

                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:2})">Show Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbHe({Id:'TabSideRightAlign',Hide:[2]} )">Hide Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrOe CrBdOe30 CrOe Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:4})">Show Tab 4</button>
                            </div>


                        </div>
                    </div>


                </div>
            </div>
        </div>

        <div id="TabSideRightAlignCt4" class="Br1 CrBrTe">
            <div class="Pg10">

                <div class="PgLt10 HtMn50vh DyFx FxDnCn">


                    <div class="FxGw1">
                        <h2 class="MnTpBm10">Showing Tab Content 4</h2>

                        <h3 class="MnTpBm10">
                            Colorful Tabs are very easily customizable.
                        </h3>
                        <ul>
                            <li>Enable Tab 1 Button Enable the 1st Tab which is Disabled.</li>
                            <li>Show Tab 2 Button Show the 2nd Tab which is Hide right now.</li>
                            <li>Hide Tab 2 Button Hide the Tab 2</li>
                            <li>Show Tab 3 Button Show the 3rd Tab.</li>
                            <li>Show Tab 4 Button Show the 4th Tab.</li>
                        </ul>
                    </div>

                    <div class="Wh100p Pg10 ">
                        <div class="DyFx  PgTpBm5 FxWp">
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrBe CrBdBe30 CrBe Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:0})">Show Tab 0</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrBn CrBdBn30 CrBn Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:1})">Enable Tab 1</button>
                            </div>

                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:2})">Show Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGy CrBdGy30 CrGy Wh100p" onclick="CT.TbHe({Id:'TabSideRightAlign',Hide:[2]} )">Hide Tab 2</button>
                            </div>
                            <div class="DyFx FxWhHf20 Pg5">
                                <button type="button" class="Bn Br2 CrBrGn CrBdGn30 CrGn Wh100p" onclick="CT.TbAe({Id:'TabSideRightAlign', Active:3})">Show Tab 3</button>
                            </div>


                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>


<script>
    document.addEventListener("DOMContentLoaded", function (){
        CT.TbCt({
            Id: 'TabSideRightAlign',
            Active: 0,
            Disable: [1],
            Hide: [2],
            NavAlign: 'Right',    //[ default is Top, Right,Left,Bottom]
            NavWidthPercent: 28, //[default is the 20]
            NavLinkHeightPx: 40, //[default is 28 px]
            //NavScroll:'N',       //[default is 'Y']
            //ClBkFn: { 0: CallBack0, 2: CallBack2 },//0,2 DenotesTablink will call CallbAck0 & Callback2 respectively.

        });
    });
</script>