focus on tab from input

by miglio esaud

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<ul>

<li class="main" id="first-element" role="tab" data-toggle="tab">
	<div class="question">This is my first question</div>
    <input type="text" placeholder="First Answer">
</li>

<li class="main" role="tab" data-toggle="tab">
	<div class="question">Second Question</div>
    <input type="text" placeholder="Second Answer">
</li>

<li class="main" role="tab" data-toggle="tab">
	<div class="question">Third Question</div>
    <input type="text" placeholder="Third Answer">
</li>

</ul>

CSS

input {
	padding:10px;
	margin-bottom: 10px;
	border-radius: 5px;
	border: 1px solid #bbbbbb;
	font-size: 18px;
}

li {
  list-style: none;
  
}

JavaScript

$(document).ready(function() {
	$('li.main').fadeTo(1000, 0.2);
	$('li#first-element').fadeTo(1000, 1.0);
});

var hideshow = function(obj){
    $('li.main').not(obj).stop().animate({
        opacity: 0.2
    });
    // Make this opaque
    $(obj).stop().animate({
        opacity: 1.0
    });
}

$('li.main').click(function() {
    hideshow(this);
});

$('li.main').on('keyup',function(e){
    var code = e.keyCode || e.which;
    if(code == 9) { //Enter keycode
        hideshow(this);
    } 
});