CODEWITHSUNDEEP
javascriptjquery
Michael Schwartz
Michael Schwartz

Reputation: 8425

Show Specific DIVs if Selected DIVs are Hidden

Fiddle - http://jsbin.com/udumibO/1/edit

If these divs are hidden (they're hidden by the .hide() event handler) then I want two other divs to show.

I tried the following on document.ready, but it's not working, and I have no idea why.

Here's the code.

if ($(".select-properties, .div-properties, .image-properties, .table-properties").is(':hidden')) {
    $(".starter-properties, .canvas-properties").show();
}

Any help is greatly appreciated.

Upvotes: 0

Views: 67

Answers (5)

kavinhuh
kavinhuh

Reputation: 739

You can use 

$(".target").toggle(function () {
    // your remaining action. something written here
});

Upvotes: 0

Ashish Kumar
Ashish Kumar

Reputation: 3039

Ok, it looks like a lot of code here. :P

Great, so I think, you just want to create a tab system and initially you want to hide all the tab content and show something else by default.

Well, Here is something which doing same as your code, and also solving your problem.

$("span", ".nav").click(function(){
        var target = $("." + $(this).attr("class").replace(/tool$/g, "properties"));

        target.show().siblings().hide();
        $(this).addClass("active").siblings().removeClass("active");
    });

    $(".select-properties, .div-properties, .image-properties, .table-properties").hide();

jsfiddle: http://jsfiddle.net/ashishanexpert/c7eJh/2/

JSFiddle code is well commented.

Let me know, if something you want to add or ask about this. Good luck!

Upvotes: 0

Michael Schwartz
Michael Schwartz

Reputation: 8425

I managed to accomplish the effect I wanted using the following function.

$(".select-tool, .div-tool, .image-tool, .table-tool, .edit-tool").on("mouseup touchend", function() {
  if ($(".select-properties, .div-properties, .image-properties, .table-properties").is(':hidden')) {
    $(".starter-properties, .canvas-properties").show();
    $(".select-properties, .div-properties, .image-properties, .table-properties").hide();
  }
});

Here's the fiddle - http://jsbin.com/udumibO/3/edit

I'm sure there's a neater way to write this, but this is the best I could do to accomplish the effect I wanted.

Upvotes: 0

Rahul Sahu
Rahul Sahu

Reputation: 284

Try this link It might be helpfull for you. http://jsfiddle.net/rahulsahu/eveKU/

HTML : 

<div id="first-div">first div</div>
<button id="first">hide above div</button><br/>
<button id="second">show another div when first div is hidden otherwise don't show</button>
<div id="second-div" style="display:none;">Second div</div>

JQuery : 

$("button#first").click(function(){
    $("#first-div").hide();

});
$("button#second").click(function(){

if($('#first-div').is(':visible')) {
    // do nothing
    alert("first div is not hidden");
  }
    else{
         $("#second-div").show();
    }
});

Upvotes: 0

Bappi Datta
Bappi Datta

Reputation: 1380

Use this:

if ($('.select-properties, .div-properties, .image-properties, .table-properties').css('display') == 'none') {
    $(".starter-properties, .canvas-properties").show();
}

Upvotes: 1

Related Questions