What is the best way of sliding section of html using javascript?

Question

Guys,

I have a hidden section in my Html template (Am using Django templates), the hidden section is a login form, i want when a user clicks some login text(link), the html text hidding the form should slide downwards revealing the form.

I have a feeling this can be done in Javascript!

Am using django, please give step by step details of how to include the javascript in my project.

Help

Gath

Answer 1

I don't use Django, but I can tell you that JQuery will do exactly what you want. You will need to include the JQuery library, and then use the slideDown() and slideUp() functions to show your form.

Here's a rough example of what you are after. Check the JQuery documentation for more information

<script>
    $("#toggleForm").click(function () {
      if ($("#loginForm").is(":hidden")) {
        $("#loginForm").slideDown("slow");
      } else {
        $("#loginForm").slideUp("slow");
      }
    });
</script>

<div id='toggleForm'>Show Login</div>
<div id='loginForm'>
 Your form goes here!
<div>

Answer 2

If you're using jQuery, something like this should do the trick

$('.login-link').bind('click', function(e) { // bind event handler to click of login link

    $('#login-panel').slideDown(); // slide down the panel
    e.preventDefault(); // stop the link taking you to the js disabled login page

});

Of course, this is only a starting point, as you'd ideally want to be able to slide it up and down on each consecutive click.

Answer 3

To continue on Travis' response;

<script type="text/javascript">
  $(document).ready(function() {
    $("#toggleForm").click(function () {
      $("#loginForm").slideToggle("slow");
    });
  });
  </script>
<div id='toggleForm'>Show Login</div>
<div id='loginForm'>
 Your form goes here!
<div>

i.e. slideToggle() is your friend.