-4

I have two classes, div1 and div2. div1 is a countdown and div2 is a captcha. I want div2 to be visible in page only after div1 is hidden :

<div class="1"></div>
<div class="2" style="display:none"></div>

Now how can I make a javascript for that?

Zorba
  • 41
  • 1
  • 4
  • 2
    ofcourse you can but have you tried anything for it. – Tanmay Aug 09 '16 at 08:08
  • I tried a javascript that makes div2 visible after a time delay like this : `$(function() { $(".div2").delay(10000); });` ... but I need to make the visibility of div2 depending on the hidden of div1. – Zorba Aug 09 '16 at 08:11
  • .captcha is a class which class you are using for the delay...anyways give description and you can do your work after checking div1 is hidden or not like if($(".div1").style.display==none){$(".div2").show();}else{$(".div2").hide();} – Tanmay Aug 09 '16 at 08:14
  • Sorry not captcha but the class is ( div2 ) I meant. I need a correct writing of a script like this : `if($(".div1").("hidden")){ .div2("visible");} else {$(.div2).("hidden")}` – Zorba Aug 09 '16 at 08:28
  • @Zorba are you using JQuery ? – Flying Gambit Aug 09 '16 at 09:16

2 Answers2

1

Could you just toggle div2's visibility with JS when toggling div1? I assume you're using JS to hide div1 so surely there you can toggle div2 in the same block of code?

Using jQuery

<style>
  .div2 {
    visibility: hidden;
  }
</style>

$('.div1').css('visibility', 'hidden');
$('.div2').css('visibility', 'visible');

?

Checking visibility?

if ($('.div1').is(':visible')) {
  $('.div2').css('visibility', 'hidden');
}

OR do you want your code separate and so you want to trigger an event from the div1 script when it hides so div2's script activates it's own script to action?

Pocketninja
  • 395
  • 1
  • 12
  • Yes I already use a JS to hide div1. I need a separate JS to only show div2 after div1 is hidden. – Zorba Aug 09 '16 at 08:38
0

I assume that you are using JQuery as your code in the comment section looks like JQuery. So this is how I would solve using JQuery.

Keep count-down div shown , while captcha div hidden using hidden = "true".

Then as soon as count down is over, you can toggle both divs

$(countDownDiv).toggle(); // this will hide it

$(captchaDiv).toggle(); // this will make it visible

Flying Gambit
  • 1,238
  • 1
  • 15
  • 32