how to open Link url if className changes to display: block;

Issue

I'm trying to develop a function that will trigger a click on a link, but only if a classname is: display: block;

but I'm not advanced and I couldn't do it

what I got so far: https://jsfiddle.net/thvinic/xesbvfkc/

if ($('hidden').is('display') == 'block') {
document.getElementById("urlx").click();
}

.hidden { display: block; }

<div id="HIDDENDIV" class="hidden">this is a div</div>

    <a href="https://www.google.com" id="urlx">Google go example!</a>
    
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="path-para-seu-script"></script>

thanks for help!😊👍

Solution

Try checking the .hidden property display with .css and inside the click event on link.

e.preventDefault(); // to prevent the default click

if ($('.hidden').css('display') == 'block') { //ask if .hidden display is block

$('#urlx').unbind('click'); //Unbind the click for removing the preventDefault()

In this example (.hidden is display:none) so the click don't work. Change the display:none to display:block to make the link work.

$('#urlx').on("click", function(e){
e.preventDefault();
if ($('.hidden').css('display') == 'block') {
  $('#urlx').unbind('click');
  document.getElementById("urlx").click();
}
});

.hidden { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div id="HIDDENDIV" class="hidden">this is a div</div>
<a href="https://www.google.com" id="urlx">Google go example!</a>

Edited! Automatic click: It waits 2 seconds and click!...

setTimeout(function(){
if ($('.hidden').css('display') == 'block') {
  document.getElementById("urlx").click();
}
},2000);

.hidden { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div id="HIDDENDIV" class="hidden">this is a div</div>
<a href="https://www.google.com" id="urlx">Google go example!</a>

Answered By - Roy Bogado