I am facing an issue with my list of items that have hidden content appearing on hover. I want to achieve the same functionality while tabbing through my page, but currently, all hidden content appears at once.
Check out a live example of my code here
jQuery:
$('#top .item .content').hover(function (e) {
$(this).children('.black-box').stop().slideToggle(300);
});
$('#top').on('keyup', function (e) {
var keyCode = e.keyCode || e.which;
var isTabbing = false;
if (keyCode == 9) {
if ($('.featured-content').find('*').is(':focus')) {
if (!isTabbing) {
isTabbing = true;
$('.featured-content .item .content .black-box').stop().slideToggle(300);
}
}
}
});
HTML:
<div id="top" class="featured-content">
<div class="item">
<h3>Tacos</h3>
<div class="content">
<img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="" class="image" />
<div class="black-box">
<div class="background"></div>
<a href="#">I love tacos!</a>
</div>
</div>
<div class="start-btn">Start Eating</div>
</div>
<div class="item">
<h3>Pizza</h3>
<div class="content">
<img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="" class="image" />
<div class="black-box">
<div class="background"></div>
<a href="#">And Pizzzzzzaaa! P-I-Z-Z-A!</a>
</div>
</div>
<div class="start-btn">Keep Eating</div>
</div>
<div class="item">
<h3>OMFG Naps</h3>
<div class="content">
<img src="http://budapesttimes.hu/wp-content/themes/newsroom14/img/placeholder.png" alt="" class="image" />
<div class="black-box">
<div class="background"></div>
<a href="#">Because you just ate a ton of food! #foodcoma</a>
</div>
</div>
<div class="start-btn">Go to sleep</div>
</div>
</div>