CODEWITHSUNDEEP
jqueryhtml
Reynier
Reynier

Reputation: 2478

Hide/show all DIV but the one picked

See I have this HTML code:

<form method="post" id="product_create" action="">
    <ul>
        <li id="tab1"><a href="#">Step 1</a></li>
        <li id="tab2"><a href="#">Step 2</a></li>
        <li id="tab3"><a href="#">Step 3</a></li>
        <li id="tab4"><a href="#">Step 4</a></li>
    </ul>

    <div id="categories-picker"></div>
    <div style="display:none" id="product-select"></div>
    <div style="display:none" id="product-details"></div>
    <div style="display:none" id="product-stock"></div>
</form>

I need to show/hide all div others than picked one. In this case if I click in li#tab1 then div#categories-picker should show and others should hide no matter where I was meaning for example if I was in div#product-stock. The same behavior should go to the rest. I made this code:

$("#product_create").on("click", "tab1, tab2, tab3, tab4", function() {
    $('#product_create').not($(this)).hide();
});

Any advice on this? Maybe is a better way to do this but I don't find it

Upvotes: 0

Views: 197

Answers (3)

techfoobar
techfoobar

Reputation: 66663

Build some kind of relation between the <li>s and <div>s you need displayed on clicking those <li>s. Below i've added a data attribute, display to each <li> to indicate the <div> to be displayed on clicking each.

Demo

<form method="post" id="product_create" action="">
    <ul>
        <li id="tab1" data-display="categories-picker"><a href="#">Step 1</a></li>
        <li id="tab2" data-display="product-select"><a href="#">Step 2</a></li>
        <li id="tab3" data-display="product-details"><a href="#">Step 3</a></li>
        <li id="tab4" data-display="product-stock"><a href="#">Step 4</a></li>
    </ul>

    <div id="categories-picker"></div>
    <div style="display:none" id="product-select"></div>
    <div style="display:none" id="product-details"></div>
    <div style="display:none" id="product-stock"></div>
</form>

And then use that relation to show the appropriate <div>

$("#product_create").on("click", "#tab1, #tab2, #tab3, #tab4", function() {
    $('#'+$(this).data('display')).show().siblings('div').hide();
    return false;
});

Update:

Changing to a DIV only if it isn't empty

$("#product_create").on("click", "#tab1, #tab2, #tab3, #tab4", function() {
    var div = $('#'+$(this).data('display'));
    if($.trim(div.html()) !== '') {
        $('#'+$(this).data('display')).show().siblings('div').hide();
    }
    return false;
});

Upvotes: 1

MDEV
MDEV

Reputation: 10838

Give them a class of .tab and use this:

$("#product_create").on("click",".tab",function() {
   $("#product_create .tab").not($(this)).hide(); 
});

JSFiddle

Upvotes: 0

Chris Dixon
Chris Dixon

Reputation: 9167

You're missing the li child - it should be:

$("#product_create").on("click", "#tab1, #tab2, #tab3, #tab4", function() {
    $('#product_create li').not($(this)).hide();
});

jsFiddle: http://jsfiddle.net/EJpaW/

Upvotes: 0

Related Questions