Check for block visibility in jquery

Question

Good day! There is a half working code, I can not understand where the error is.

$(document).ready(function(){ $('#login-trigger').click(function () { $("#login-content").toggle("slide"); }); if ($("#login-content2").is(":hidden")){ $('#signup').click(function () { $("#login-content2").toggle("slide") $("#login-content").hide(); }); } else{ $('#login-trigger').click(function () { $('#login-content2').hide(); }); } });

 *{ margin: 0; padding: 0; } nav ul { margin: 0; list-style: none; position: relative; float: right; background: #2980b9; } nav li { float: left; } nav #login-trigger{ display: inline-block; zoom: 1; padding: 10px; } #signup{ display: inline-block; margin-top: 10px; color: white; } nav #login-content, #login-content2{ display: none; position: absolute; top: 0px; right: 0; z-index: 999; background: #3498db; padding: 15px; } nav li #login-content, #login-content2{ right: 46px; width: 250px; } /*--------------------*/ #login #submit { background: #2980b9; border: none; float: left; height: 30px; padding: 0; width: 100px; cursor: pointer; color: #fff; } #login #submit:hover, #login #submit:focus { background-color: #1476b7; } #login #submit:active { outline: none; } #login #submit::-moz-focus-inner { border: none; } #login label { float: right; line-height: 30px; color: white; } #login label input { position: relative; top: 2px; right: 2px; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flyout login form</title> <link rel="stylesheet" href="style/main.css"> <link rel="stylesheet" href="style/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <nav> <ul> <li id="login"> <a id="login-trigger" href="#"> <i class="fa fa-key" aria-hidden="true"></i> </a> <div id="login-content"> <form> <fieldset id="inputs"> <input id="username" type="email" name="Email" placeholder="email" required> <input id="password" type="password" name="Password" placeholder="password" required> </fieldset> <fieldset id="actions"> <input type="submit" id="submit" value="Enter"> <label><input type="checkbox" checked="checked"> remember</label> <div style="clear:both;"></div> <a id="signup" href="#">SignUp</a> </fieldset> </form> </div> <div id="login-content2"> <form> <fieldset id="inputs"> <input id="firstname" type="text" name="firstname" placeholder="first name" required> <input id="lastname" type="text" name="lastname" placeholder="last name" required> <input id="username" type="email" name="Email" placeholder="email" required> <input id="password" type="password" name="Password" placeholder="password" required> </fieldset> <fieldset id="actions"> <input type="submit" id="submit" value="Enter"> <label><input type="checkbox" checked="checked"> remember</label> </fieldset> </form> </div> </li> </ul> </nav> <script src="script.js"></script> </body> </html>

The logic of work is as follows:

Click on the top square button and the authorization form appears. If the user is not authorized - clicks registration "SignUp" The authorization form closes, a reg is opened.

And now the most important thing:

If the user changes his mind, then when clicking on the same square or in any area of the screen where there is no form, everything should be closed.

I would be very grateful for the help!

Ep1demic Ep1demic 2,551 13 25 · Accepted Answer · 2016-11-10T08:59:47

You specify different click events for the button, based on whether the block is now visible.

Try this approach:

 $('#signup').click(function () { if ($("#login-content2").is(":hidden")){ $("#login-content2").toggle("slide"); $("#login-content").hide(); } else { $('#login-content2').hide(); } });

What happened in the code - we hung up on the element one handler, which checks whether the element is hidden and performs actions based on this.

In your case, it was like this:

Slide back and forth # login-content2 and constantly hide # login-content .

At the same time, the click handler on # login-trigger does not hang, since the if instruction is executed only once, when the page is loaded and the handler on # login-trigger most likely will not hit.

In the case when the user changed his mind:

 $(document).click(function(){ $('#content').hide(); });

You can also try to make the block substrate full-screen, when a modal window is called up and when you click on it, the modal window closes, thereby creating the effect you need.

This, by the way, can be easily done using bootstrap modal windows.

ps The code is not guaranteed to work - but I think I should direct you.

Action: "If the user changed his mind, then when you click on the same square or in any area of the screen where there is no form, everything should be closed."
When you click on an empty area, everything closes, and when you click on a square, the authorization form appears again
@ArtemManzhos try to force it to hide by adding: $ ('# login-content'). Css ('display', 'none');
and after that, it cannot again be a head, for it has returned to its default position and reopens with a click!

Dmitriy Kondratiuk Dmitriy Kondratiuk 1,802 five eleven · Answer 2 · 2016-11-10T09:01:08

 $(document).ready(function(){ $('#login-trigger').click(function () { $('.fon').fadeIn(0); $("#login-content").toggle("slide"); $("#login-content2").hide(0); // при нажатии на квадрат прячем вторую форму }); $('#signup').click(function () { $("#login-content2").toggle("slide"); $("#login-content").hide(); }); $('.fon').click(function () { // при нажатии на пустую область прячем все $("#login-content2").hide(0); $("#login-content").hide(0); }); });

 *{ margin: 0; padding: 0; } nav ul { margin: 0; list-style: none; position: relative; float: right; background: #2980b9; } nav li { float: left; } nav #login-trigger{ display: inline-block; zoom: 1; padding: 10px; } #signup{ display: inline-block; margin-top: 10px; color: white; } nav #login-content, #login-content2{ display: none; position: absolute; top: 0px; right: 0; z-index: 999; background: #3498db; padding: 15px; } nav li #login-content, #login-content2{ right: 46px; width: 250px; } /*--------------------*/ #login #submit { background: #2980b9; border: none; float: left; height: 30px; padding: 0; width: 100px; cursor: pointer; color: #fff; } #login #submit:hover, #login #submit:focus { background-color: #1476b7; } #login #submit:active { outline: none; } #login #submit::-moz-focus-inner { border: none; } #login label { float: right; line-height: 30px; color: white; } #login label input { position: relative; top: 2px; right: 2px; } /* стили для невидимого слоя */ .fon { position: absolute; width: 100%; height: 100%; display: none; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flyout login form</title> <link rel="stylesheet" href="style/main.css"> <link rel="stylesheet" href="style/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <!-- добавляем невидимый слой --> <div class="fon"></div> <!-- --> <nav> <ul> <li id="login"> <a id="login-trigger" href="#"> <i class="fa fa-key" aria-hidden="true"></i> </a> <div id="login-content"> <form> <fieldset id="inputs"> <input id="username" type="email" name="Email" placeholder="email" required> <input id="password" type="password" name="Password" placeholder="password" required> </fieldset> <fieldset id="actions"> <input type="submit" id="submit" value="Enter"> <label><input type="checkbox" checked="checked"> remember</label> <div style="clear:both;"></div> <a id="signup" href="#">SignUp</a> </fieldset> </form> </div> <div id="login-content2"> <form> <fieldset id="inputs"> <input id="firstname" type="text" name="firstname" placeholder="first name" required> <input id="lastname" type="text" name="lastname" placeholder="last name" required> <input id="username" type="email" name="Email" placeholder="email" required> <input id="password" type="password" name="Password" placeholder="password" required> </fieldset> <fieldset id="actions"> <input type="submit" id="submit" value="Enter"> <label><input type="checkbox" checked="checked"> remember</label> </fieldset> </form> </div> </li> </ul> </nav> <script src="script.js"></script> </body> </html>

Check for block visibility in jquery

2 answers 2

More articles: