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>
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>