CODEWITHSUNDEEP
jqueryhtmlshow-hide
Haryono Sariputra
Haryono Sariputra

Reputation: 310

JQuery Hide and Showing Tabs Content

I have a problem with the JQuery Hiding and showing tabs

I have 2 list that I want to show and hide them, if I click on <a href="#tab-description">Description</a>, then I want to show div with id=tab-description.

And if I click on <a href="#tab-additional_information">Description</a>, then I want to show div with id=tab-additional_information.

Here is my HTML and Jquery code :

HTML :

<div class="col-sm-6" id="tabs-container">
        <div class="woocommerce-tabs">
            <ul class="tabs nav nav-tabs" id="myTabs">
                <li class="description_tab" role="presentation">
                    <a href="#tab-description">Description</a>
                </li>
                <li class="additional_information_tab" role="presentation">
                    <a href="#tab-additional_information">Additional Information</a>
                </li>
            </ul>

            <div class="panel entry-content tab-pane" id="tab-description">
                <h2>Product Description</h2>
                <p><strong>Electrolux Blender Glass 1.5L 450W – EBR2601</strong></p>
                <p>Features :</p>
                <ul>
                <li>Power : 450 Watt</li>
                <li>Kapaitas : 1.5 Liter</li>
                <li>Jar : Kaca</li>
                <li>Memiliki 3 level kecepatan + Tombol Pulse</li>
                <li>Bisa menghancurkan es</li>
                <li>4 mata pisau stainless steel</li>
                <li>Kaki karet anti slip</li>
                </ul>
            </div>

            <div class="panel entry-content tab-pane" id="tab-additional_information" style="display: none;">
                <h2 class="caption-additional-information">Additional Information</h2>
                <table class="shop_attributes">
                    <tbody>
                    <tr class="">
                        <th>Weight</th>
                        <td class="product_weight">5 kg</td>
                    </tr>
                    </tbody>
                </table>
            </div>
</div>

And Here is my Jquery Code : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script type="text/javascript">

$("#tab-additional_information").hide();

 $(document).ready(function(){
    $(".tabs").find('li').each(function( index ){

         $(".tabs").find('li').click(function(e){
            e.preventDefault();

            if($("#tab-additional_information").hide()){            
                $("#tab-additional_information").show();
                $("#tab-description").hide();

                if(("#tab-description").hide()){
                    $("#tab-additional_information").hide();
                    $("#tab-description").show();
                }
            }
        });
    });
});
</script>

The result of my code is just can click one tab , and the other tab cant show I tried many effort but this one is close enough i think

Thanks

Upvotes: 4

Views: 18168

Answers (4)

mugdha
mugdha

Reputation: 90

you can do the following, where the list you want to show for first div will come in flip1 click and the other will be at flip2 click, and panel1 and panel2 will be your li related code

   <script type="text/javascript">

    $(document).ready(function () {
        $("#panel2").slideUp("fast")

             $("#flip1").click(function () {

                 $("#panel1").slideToggle("slow");
                 $("#panel2").slideUp("slow");

             });
              $("#flip2").click(function () {

                 $("#panel2").slideToggle("slow");
                 $("#panel1").slideUp("slow");

            });


        });
    </script>

Upvotes: 3

Jamie Barker
Jamie Barker

Reputation: 8246

This code is optimal because it adds one click listener to your page instead of many, but also makes it only fire on anchors that begin with # in the href. Therefore it won't break if you end up with an anchor in there that is a proper link. Also gave you a different method for hiding other anchors, should you not have a class specific to them (which you should be, but just in case you can't change HTML).

$('.tabs li').on('click', 'a[href^="#"]', function(e) { // Apply click listener to anchors that start with '#'
    e.preventDefault();
    var strID;
    $('.tabs li a[href^="#"]').not(this).each(function() { // Get the anchors that haven't been clicked and hide the corresponding div. You can also do this with a blanket class such as $('.panel').hide(), but this assumes that ONLY these items have that class.
        strID = $(this).attr('href'); 
        $(strID).hide();      
    });
    strID = $(this).attr('href'); 
    $(strID).show();      
});

Upvotes: 0

PHP Worm...
PHP Worm...

Reputation: 4224

Try this:

 $(document).ready(function(){
    $(".panel").hide();  /*Instead of hiding .panel here you can hide it by using css for first time */
    $("#myTabs li a").click(function(e){
         e.preventDefault();
        var showIt =  $(this).attr('href');
        $(".panel").hide();
        $(showIt).show();           
    })
});

Upvotes: 4

Narendra Vaghela
Narendra Vaghela

Reputation: 289

$("#tab-additional_information").hide();

$(document).ready(function(){
     $(".tabs").on('click', 'a', function(e){
         e.preventDefault();
         $('#tabs-container .entry-content').hide();
         $($(this).attr("href")).show();
     });
});

Check this fiddle: https://jsfiddle.net/vne715qx/1/

Upvotes: 3

Related Questions