CODEWITHSUNDEEP
javascriptjquerycss
user2926095
user2926095

Reputation: 5

Toggle/close all other divs when one is clicked

everyone.

Need help to close all other divs when one is clicked. Thanks in advance!

Bellow is the code:

=============================

JS

$(".dis-nav a").click(function(e){
e.preventDefault();
var myClass=$(this).attr("id");
//  alert(myClass);
$(".dis-content ."+myClass).toggle('fast');
});

=============================

HTML

<div class="dis-nav button">
<a href="#" id="area1">Firefox</a> 
<a href="#" id="area2">Safari</a> 
<a href="#" id="area3">Chrome</a> 
<a href="#" id="area4">IE</a> 
</div>

<div class="dis-content">
<div class="area1">
<h3>Firefox</h3>
<p>Suspendisse potenti. Morbi ac felis nec mauris imperdiet fermentum. Aenean sodales augue ac lacus hendrerit sed rhoncus erat hendrerit. Vivamus vel ultricies elit. Aliquam ut feugiat ante. Curabitur lacinia nulla vel tellus elementum non mollis justo aliquam.</p>
<a href="#" class="btn btn-warning"><i class="icon-shopping-cart"></i> Buy</a> <a href="#" class="btn btn-success">TryMais</a>
</div>
<div class="area2">
<h3>Safari</h3>
<p>Suspendisse potenti. Morbi ac felis nec mauris imperdiet fermentum. Aenean sodales augue ac lacus hendrerit sed rhoncus erat hendrerit. Vivamus vel ultricies elit. Aliquam ut feugiat ante. Curabitur lacinia nulla vel tellus elementum non mollis justo aliquam.</p>
<a href="#" class="btn btn-warning"><i class="icon-shopping-cart"></i> Buy</a> <a href="#" class="btn btn-success">TryMais</a>
</div>
<div class="area3">
<h3>Chrome</h3>
<p>Suspendisse potenti. Morbi ac felis nec mauris imperdiet fermentum. Aenean sodales augue ac lacus hendrerit sed rhoncus erat hendrerit. Vivamus vel ultricies elit. Aliquam ut feugiat ante. Curabitur lacinia nulla vel tellus elementum non mollis justo aliquam.</p>
<a href="#" class="btn btn-warning"><i class="icon-shopping-cart"></i> Buy</a> <a href="#" class="btn btn-success">TryMais</a>
</div>
<div class="area4">
<h3>IE</h3>
<p>Suspendisse potenti. Morbi ac felis nec mauris imperdiet fermentum. Aenean sodales augue ac lacus hendrerit sed rhoncus erat hendrerit. Vivamus vel ultricies elit. Aliquam ut feugiat ante. Curabitur lacinia nulla vel tellus elementum non mollis justo aliquam.</p>
<a href="#" class="btn btn-warning"><i class="icon-shopping-cart"></i> Buy</a> <a href="#" class="btn btn-success">TryMais</a>
</div>
</div>

Upvotes: 0

Views: 112

Answers (1)

karthikr
karthikr

Reputation: 99620

Try this:

$(".dis-nav a").click(function (e) {
    e.preventDefault();
    var myClass = $(this).attr("id");
    //  alert(myClass);
    $('.dis-content div').hide();
    $(".dis-content ." + myClass).show();
});

Demo

If you want to hide the entire block intially, and show just the first by default:

$(function(){
    $('.dis-content div').hide()
    $('.dis-content .area1').show()

    $(".dis-nav a").click(function (e) {
        e.preventDefault();
        var myClass = $(this).attr("id");
        //  alert(myClass);
        $('.dis-content div').hide();
        $(".dis-content ." + myClass).show();
    });
    $(".dis-nav #show-all").click(function (e) {
        $('.dis-content div').show()
    });
});

I shall let you figure out the css, and other minor details yourself.

Upvotes: 1

Related Questions