I'm a beginner in jquery and I'm attempting to achieve the following:
I want each menu to collapse separately when the mouse hovers over it. The issue is that both menus collapse simultaneously! I know it's probably something simple, but I just can't seem to figure it out. Please help. Thanks
$(document).ready(function() {
$(".lead-title-index").hover(function() {
$(".featured-content").slideDown("slow");
});
});.featured-content {
width: 200px;
height: 400px;
display: none;
background: #2E2E2E;
}
.lead-title-index {
background: #FFBF00;
display: block;
margin-bottom: 0px;
position: relative;
color: #000;
font-size: 14px;
width: 200px;
height: 70px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="col-md-15 col-sm-3">
<div class="lead-title-index">
</div>
<article id="video" class="featured-content">
<div class="promo-text">
</div>
</article>
</div>
<div class="col-md-15 col-sm-3">
<div class="lead-title-index">
</div>
<article id="video" class="featured-content">
<div class="promo-text">
</div>
</article>
</div>