how do I use onClick, load, show to load div

I have been trying out JS to make a button switch, show, hide text.

I have two buttons, register and login. When login is clicked, register will hide, vice versa.

Here is the link to my jsfiddle

The code here..

HTML

<button id="btn1">Login</button>
<button id="btn2">Sign Up</button>

    <div id="login">
        <h4>Login</h4>
    </div>


    <div id="register">
         <h4>Register</h4>
    </div>

JS

$("#btn2").on('click', function() {
   $("#register").show();
   $("#login").hide();
});

$("#btn1").on('click', function() {
   $("#login").show();
   $("#register").hide();
});

CSS

#register {
    display: none;
}

It seems to not be working.. Register is display as none as I want to make login show up as default.

Answers


You need to include jQuery first before using it.

It can be included under "Framework and extensions"

Updated Fiddle


Need Your Help

Rails auto reload page when some record change?

javascript mysql ruby-on-rails

I have a rails app, some pages show data from DB, does any way that when I change specify DB record(almost use phone app calls web API),and if my web idle on page which related the change data, the

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.