Member Avatar for mattyd

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
  • 132 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by mattyd

Recommended Answers

All 3 Replies

Member Avatar for pritaeas

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.

commented: Thank you - Advice followed! +0
Member Avatar for M.Waqas Aslam

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>
commented: Thank you +7
Member Avatar for mattyd

Thank you, both.

Matthew

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.