Please Help

JavaScript
1

Can anyone please help me how to code this type of dropdown sign up button on jquery like from this site:

https://www.schoology.com/home.php

When you click the instructor or student button for sign up, the registration field appears and when you can click back to return to button selection in sign up…

Please help me how to do this in jquery or even in javascript…

Thanks… :slight_smile:

2

Hi,

Welcome to the forums :slight_smile:

All this is, is a matter of showing and hiding elements according to what is clicked.

Here is a simple example of how you might achieve something similar:

<button id="sign-up">Sign up</button>
<div id="sign-up-options" class="hidden">
    <div id="initial-choice">
        <p>Please choose an option:</p>
        <button id="opt-a">Opt A</button>
        <button id="opt-b">Opt B</button>
    </div>
    <div id="a" class="hidden">
       <a href="#" class="back">Back</a>
       <h1>Option A</h1>
       <p>Your stuff for option A here</p>
    </div>
    <div id="b" class="hidden">
       <a href="#" class="back">Back</a>
       <h1>Option B</h1>
       <p>Your stuff for option B here</p>
    </div>
</div>

$("#sign-up").on("click", function(){
   $("#sign-up-options").toggle();
});

$("#opt-a").on("click", function(){
    $("#initial-choice").fadeOut("slow", function(){
        $("#a").fadeIn();
    });
});

$("#opt-b").on("click", function(){
    $("#initial-choice").fadeOut("slow", function(){
        $("#b").fadeIn();
    });
});

$(".back").on("click", function(){
    $(this).parent().fadeOut(function(){
      $("#initial-choice").fadeIn();
    });
});

Demo

I’ve kept it verbose so that you have a better idea of what’s going on.
In the real world, you would make these functions more generic, so as to avoid repetition.

Let me know if you have any questions.

HTH