How do you hide a form until a button is clicked in HTML or CSS?

Question

I want to hide an html form within a button. I tried adding a button around the form similar to a parent div with a child div, but that didn't seem to work. I'm confused about how to add the "hide" element. Do I have to use javascript or jQuery? Or is there a simple way to do it with just CSS or HTML?

Thanks in advance!!

 /*LOGIN*/ html { background: #fff; font-size: 10pt; } .loginform ul { padding: 0; margin: 0; } .loginform il { display: inline; float: top right; } label { display: block; color: #ED4337; } label:hover { background-color: #fff; color: white; border-radius: 8px; } .cf:before .cf:after { content: ""; display: table; } .cf:after { *zoom: 1; } :focus { outline: 0; } .loginform input:not([type=submit]) { padding: 5px; margin-right: 10px; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 3px; box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 0px 0px rgba(250, 250, 250, 0.5); } .loginform input[type=submit] { border: 1px solid rgba(0, 0, 0, 0.3); background: #64c8ef; /*old browsers*/ background: -moz-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); /*FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, #00a2e2)); background: -webkit-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); background: -o-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); background: -ms-linear-gradient(top, #64c8ef 0%, #00a2e2 100%); background: linear-gradient(to bottom, #64c8ef 0%, #00a2e2); filter: progid:DXImageTransform.Microsoft.gradient ( startColors)='#64c8ef', endColorstr='#00a2e2', GradientType=0); color: #fff; padding: 5px 15px; margin-right: 0; margin-top: 15px; border-radius: 3px; text-shadow: 1px 1px 0px #fff; } /*END LOG IN */ 

 <!--LOG IN INFO--> <button class="log">Log In <section class="loginfrom cf"> <form name="login" action="index_submit" method="get" accept-charset="utf-8"> <ul> <li><label for="username">Email</label> <input type="email" name="usermail" placeholder="yourname@email.com" required></li> <li><label for="password">Password</label> <input type="email" name="password" placeholder="password" required></li> <li> <input type="submit" value="Login"></li> </ul> </form> </section> </button> <!--END LOG IN INFO--> 

Answer 1

First and foremost, close the button tag <button class="log">Log in</button> . Then, hide the form by using css, like .loginform { display: none; } .loginform { display: none; }

Finally, to show the form when the user clicks the button, you can use jQuery.

$('.log').click(function() {
    $('.loginform').css('display', 'block');
});

To further understand CSS and Javascript and how they work together, I strongly advise you to read some tutorials and check some examples in W3Schools

https://www.w3schools.com/jquery/default.asp

https://www.w3schools.com/css/default.asp