0

Hello.

What I am planning to do for User registration in regards to agreeing to the EULA:

1)For example, there will be three conditions the User must agree to by selecting checkboxes - Only one condition displayed at a time.

2)Upon checking the first condition checkbox, the second condition appears onscreen, smoothly - The first disappearing; This would be a sort of animation. When this second checkbox is selected, this condition disappears, the third and final condition gliding into its place. (I do not want page refreshes or anything of that nature).

I hope I explained this clearly.

From my research, it appears to be JavaScript I should be using to build this. Possibly jQuery (Which I am totally unfamiliar with).

I don't think this should be too difficult to build, but any advice would be greatly appreciated.

Thank you in advance!
Matthew

3
Contributors
3
Replies
14
Views
3 Years
Discussion Span
Last Post by mattyd
1

jQuery will make this animation a lot easier. It has a fade function that will do what you need. Check the jQuery manual for an example on fade.

Votes + Comments
Thank you - Advice followed!
1

I simply take this example from w3school and made some changes hope this will help you

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#Button1").click(function(){
      $("#div1").fadeOut();
        $("#div2").fadeIn();
    });
    $("#Button2").click(function () {
        $("#div2").fadeOut();
        $("#div3").fadeIn();
    });
    $("#Button3").click(function () {
        $("#div3").fadeOut();
    });
});
</script>
</head>

<body>
<div id="div1" style="height:80px;background-color:red;"><input id="Button1" type="button" value="button" /></div><br>
<div id="div2" style="height:80px;display:none;background-color:green;">  <input id="Button2" type="button" value="button" /></div><br>
<div id="div3" style="height:80px;display:none;background-color:blue;">  <input id="Button3" type="button" value="button" /></div>

</body>
</html>
Votes + Comments
Thank you
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.