on text input focus explaining label appears

Question

Basically what i need to do is on text input focus explaining bar (what this input does) needs to appear (animation) from text input bottom. I have very hard time figuring it out, is any way to do it in css or javascript, i would love to hear your guys explanations, ill upload my mess code.
I seen some solutions, but my form has a lot of labels and a lot of going on, so its super confusing, im pretty new at this also.
here is my code:

<div class="form-row">

  <input type="text" name="firstname" id="nickas" class="input-text" placeholder="Enter your name:">

  <label for="nickas">User name:</label>

  <label class="label-helper" for="nickas">this is bar that appears</label>

  </div>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Set an additional class which has an opacity of 0 for the .label-helper, and then simply toggle the class using jQuery's focus and blur events:

$('input').on('focus', function() {  
    $(this).siblings('.label-helper').addClass('in');
}).on('blur', function() {  
    $(this).siblings('.label-helper').removeClass('in');
});

.label-helper {
  opacity: 0;
  -webkit-transition: opacity .2s ease;
     -moz-transition: opacity .2s ease;
          transition: opacity .2s ease;
}

.label-helper.in {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
  <input type="text" name="firstname" id="nickas" class="input-text" placeholder="Enter your name:">
  <label for="nickas">User name:</label>
  <label class="label-helper" for="nickas">this is bar that appears</label>
 </div>

on text input focus explaining label appears

Sign up