Member Avatar for Behseini

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
  • 148 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Behseini

Recommended Answers

All 2 Replies

Member Avatar for Airshow

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

commented: Clean , Clear and Perfect Answer +3
Member Avatar for Behseini

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 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.