CODEWITHSUNDEEP
javascripthtmlcss
NamedDaniel
NamedDaniel

Reputation: 25

How can I display several inputs by clicking on a button?

I am trying to build a website with HTML, CSS and JavaScript. But now I want to create a login interface. I have already added some inputs and coded a sign-in.js. It checks wether a user has clicked on my symbol for the login. Everything works except of one thing: I want to show the inputs when somebody clicked on my button. My button is "user-cog". Here is my code:

Index.html:

<nav id="main-nav">
    <i class="fa fa-bars" aria-hidden="true"></i>
    <ul>
      <a href="#home"><li> Home </li></a>
      <a href="#about"><li> About </li></a>
      <a href="#work"><li> Work </li></a>
      <a href="#contact"><li> Contact </li></a>
      <i class="fas fa-users-cog", id="user-cog"></i>
    </ul>
    <form id="sign-in">
      <input class="input_text" type="text" tabindex="1" placeholder="E-Mail"><br>
      <input class="input_text" type="text" tabindex="2" placeholder="Passwort"><br>
      <input id="sign-in-button" class="button" type="submit">
    </form>
  </nav>

sign-in.js:

$(document).ready(function() {
  $(".fa-users-cog").on("click", function() {
    $("header nav ul i").toggleClass("sign-in-open");
  });
});

style.css:

#main-nav ul i.sign-in-open{

  /*HERE SHOULD BE THE CODE TO SHOW THE INPUTS*/

}

I hope you can help me. If some information is missing, please tell me.

Daniel.

Upvotes: 1

Views: 70

Answers (1)

Moshe Sommers
Moshe Sommers

Reputation: 1516

You're adding the class to your button. You need to toggle the class on the form/inputs and style accordingly. like so

      $(".fa-users-cog").on("click", function() {
         $(document).ready(function() {
            //Add a class to the form
            $("#sign-in").toggleClass("open");
         });
     });

And the styles like so

        //Hide when it doesn't have the class open
        #sign-in{
            display:none;
        }
       #sign-in.open{
           display:block;
       }

Upvotes: 1

Related Questions