How to show next field when user click green button

Question

I have several fields that are hidden and should only appear when the user clicks the see button next to the first field.

My initial idea would be when the person clicks the green button (after the .Newfield) he adds the Newfield class to the next field.

(it’s okay if the green button is duplicated.)

.c-form .hide {
  display: none;
}

.newField {
  display: block!important;
  position: relative;
}

.c-form .newField:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";
  font-size: 35px;
  cursor: pointer;
  color: #1fa050
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="c-form">
  <form id="formsugestoes" method="post" enctype="multipart/form-data">
    <h3>Fale conosco</h3>
    <input type="hidden" name="setor" value="">

    <input type="hidden" name="assunto" value="formsugestoes">

    <label class="lado hide newField"><span>Nome: *</span><input class="text" type="text" name="nome" value="" required></label>

    <label class="lado hide"><span>E-mail: *</span><input class="text" type="email" name="email" value="" required></label>

    <label class="lado hide"><span>Cidade: *</span><input class="text" type="text" name="cidade" value="" required></label>

    <label class="lado hide"><span>Telefone:</span><input class="text mask-tel" type="text" name="telefone" value="" required></label>

    <label class="lado hide"><span>Mensagem:</span><textarea class="text" name="mensagem" value=""> </textarea></label>

    <div><input type="submit" name="enviar" value="Enviar" class="btnEnviar hide lado" /></div>

  </form>

</div>

Answer 1

You are creating a pseudo-element in the label, so there is no way to detect via Javascript the exact click on the button, the click will be active on label in its entirety, which takes away the intention of clicking on the button. Moreover, clicking on the button will focus the field of the name, which makes no sense.

I suggest you create the button in one span outside the label to be independent, this way you can capture the click only on the button without focusing the field. And also go cloning the button and adding after the next label until you reach the button Send.

Would look like this:

$(document).on("click", "span.newField", function(){
   var clone = $(this).clone();
   var next = $(this).next();

   $(this)
   .prev()
   .removeClass("newField hide");

   if(next[0].tagName != "DIV"){
      $(this)
      .next()
      .addClass("newField")
      .removeClass("hide")
      .after(clone);
   }else{
      $(this)
      .next()
      .find("input")
      .removeClass("hide");
   }

   $(this).remove();
});

.c-form .hide {
  display: none;
}

.newField {
  display: inline-block!important;
  position: relative;
}

.c-form span.newField:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";
  font-size: 35px;
  cursor: pointer;
  color: #1fa050;
  display: inline-block;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="c-form">
  <form id="formsugestoes" method="post" enctype="multipart/form-data">
    <h3>Fale conosco</h3>
    <input type="hidden" name="setor" value="">

    <input type="hidden" name="assunto" value="formsugestoes">

    <label class="lado hide newField"><span>Nome: *</span><input class="text" type="text" name="nome" value="" required></label>
    <span class="newField"></span>

    <label class="lado hide"><span>E-mail: *</span><input class="text" type="email" name="email" value="" required></label>

    <label class="lado hide"><span>Cidade: *</span><input class="text" type="text" name="cidade" value="" required></label>

    <label class="lado hide"><span>Telefone:</span><input class="text mask-tel" type="text" name="telefone" value="" required></label>

    <label class="lado hide"><span>Mensagem:</span><textarea class="text" name="mensagem" value=""> </textarea></label>

    <div><input type="submit" name="enviar" value="Enviar" class="btnEnviar hide lado" /></div>

  </form>

</div>

Answer 2

You make a button manager, and via javascript remove the class ". Hide".

<script>
    $('.botao_ver').click(function(){
        $(this).children('.lado').removeClass('hide');
    });
</script>

This function is generic, within your code I could not identify which button you will click to show the inputs, but to have a basis, this should help you.