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.preven

Solution 1:

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.