Multiple tabs in a single page, but the content of other tabs are also displaying in the first tab

Question

This is my HTML code:

<div class="tab-content">
            <div id="tab1" class="tab active">
                <p>Hotels In Asia</p> <br>
                <div class="asia1">
                    <p class="para1">$499 for 1 night</p>
                    <button>Book Now</button>
                    <a href="#"><p class="para2">See Photo</p></a>
                </div>
                <div class="asia1">
                    <p class="para1">$499 for 1 night</p>
                    <button>Book Now</button>
                    <a href="#"><p class="para2">See Photo</p></a> 
                </div>
                <div class="asia1">
                    <p class="para1">$499 for 1 night</p>
                    <button>Book Now</button>
                    <a href="#"><p class="para2">See Photo</p></a> 
                </div>

                 <div class="tab11">
                    <div class="place active">
                        <p>Places In Asia</p>
                        <div class="asia">
                            <img src="../images/asia_hotel_1.jpg" alt="Asia hotel">
                        </div>
                        <div class="asia">
                            <img src="../images/asia_hotel_2.jpg" alt="Asia hotel">
                        </div>
                        <div class="asia">
                            <img src="../images/asia_hotel_3.jpg" alt="Asia hotel">
                        </div> 
                    </div>
                </div> <!-- tab11 end--> 
            </div><!-- tab1 end-->
            <div id="tab2" class="tab">
                <p>Hotels In Europe</p>
                <p>para of tab2</p>
            </div>
            <div id="tab3" class="tab">
                <p>Tab 3 content here!</p>
                <p>para of tab3</p>
            </div>
            <div id="tab4" class="tab">
                <p>Tab 4 content here!</p>
                <p>para of tab4</p>
            </div> 
        </div>
    </div>

And this is my jquery which i used for multiple tabs within a single page.

<script type="text/javascript">
    $(document).ready(function() {
        $('.tab-links a').on('click', function(e)  {
            var currentAttrValue = $(this).attr('href');

    // Show/Hide Tabs
    $('.tabs ' + currentAttrValue).delay(400).slideDown(400);
    $('.tabs ' + currentAttrValue).siblings().slideUp(400);

    // Change/remove current tab to active
                     $(this).parent('li').addClass('active').siblings().removeClass('active');

    e.preventDefault();
});
    });
</script>

When I open my html page, all the content of other tabs also displaying in first tab. But when I switch to other tabs, contents are displayed fine.

We don't have the CSS, so we're unnable to help you. – DenisGL Jun 03 '16 at 19:34 — DenisGL, Jun 03 '16 at 19:34

score 1 · Accepted Answer · answered Jun 03 '16 at 19:23

Hope this piece of code will work. Please test it once.

$(document).ready(function() {
    $(".tab").hide(); // first hide all the tabs
    $(".tab").first().show(); // show only first tab by default
    $('.tab-links a').on('click', function(e)  {
    e.preventDefault();
        var currentAttrValue = $(this).attr('href');
            currentAttrValue = currentAttrValue.substring(1); // Remove # from the href

        // Show/Hide Tabs
        $('#' + currentAttrValue).delay(400).slideDown(400); //add # to get the element id with specific id.
        $('#' + currentAttrValue).siblings().slideUp(400);

        // Change/remove current tab to active
        $(this).parent('li').addClass('active').siblings().removeClass('active');

    });
});

Might be there is some mistake with my above code. Please modify carefully. — Samir, Jun 03 '16 at 19:29

score 0 · Answer 2 · answered Jun 03 '16 at 19:15

0

You have to specify the tab id when you got to the landing page so that other page contents would not come.

answered Jun 03 '16 at 19:15

Soven K Rout

123
1
9

Multiple tabs in a single page, but the content of other tabs are also displaying in the first tab

2 Answers2

Linked