0

Hi everyone,
I am new at Jquery and JavaScript as well and I really appreciate if you can help me to figure it out how I can check a state of slideToggle()?
for example, I am trying to modify the following code when a user click the Register then first to check if the Login is slideToggled First Close it and then open the Register panel.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".login").click(function(){
    $(".panel").slideToggle("slow");
    $(".panel2").slideToggle("slow");
  });

$(".register").click(function(){
    $(".panel2").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
height:120px;
display:none;
}
div.panel2
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
height:120px;
display:none;
}
p.login
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
p.register
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
</style>
</head>
 
<body>
<div class="panel">
<p>Panel 1</p>
</div>
<div class="panel2">
<p>Panel 2</p>
</div> 
<p class="login">Login</p>
<p class="register">Register</p>
</body>
</html>

what I would like to do is to check if the login panel has been Slide Toggled already, to be closed when ever the Register got click and vice versa.

2
Contributors
2
Replies
5
Views
6 Years
Discussion Span
Last Post by Behseini
1

Behseini,

I think you can achieve what you want with a combination of .slideToggle and .slideUp , without any conditional statements.

$(document).ready(function(){
  $(".login").click(function(){
    $(".panel").stop().slideToggle("slow");
    $(".panel2").stop().slideUp("slow");
  });
  $(".register").click(function(){
    $(".panel").stop().slideUp("slow");
    $(".panel2").stop().slideToggle("slow");
  });
});

This gives each link a toggle action for its own panel, whilst ensuring that the other panel is hidden.

The .stop() commands arrest any animation that is currently in progress before initiating the desired animation.

Airshow

Votes + Comments
Clean , Clear and Perfect Answer
0

Airshow,
Thanks a lot for your time, clean and clear reply.
It is great to have people like you in this kind of forums which do not try to make things more complicated than before :-) for newbies!

Thanks again

Edited by Behseini: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.