How to show and hide submenu in tabs using jquery

Manideepgoud
Posted by Manideepgoud under jQuery category on | Points: 40 | Views : 155
Hi All,
In the below code am showing how to hide and show the submenu while we hover the upper menu.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Google Graphs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
$(document).ready(function() {
$('.monthlist').hover(function(){
debugger;
var myValue = $(this).attr('href');

$(myValue).show();
});
$('.monthlist').mouseout(function(){
$(".target").hide();
});
});
</script>
<style>
.monthscontainer {
margin-top: 2%;
}
.monthslist {
list-style: none;
padding: 0px;
}
.monthslist > li {
display: inline-block;
}
.monthslist > li > a {
padding: 10px 20px;
background-color: #ddd;
color: black;
border-radius: 5px;
text-decoration: none;
}
.monthslist > li > a:hover{
cursor:pointer;
}
.monthsdata {
margin-top: 2%;
}
.target {
margin-top: 2%;
background-color:#ddd;
height:100px;
}

.target{
display:none;
}
</style>
</head>
<body>
<div class="monthscontainer">
<div class="container">
<div class="monthssection">
<ul class="monthslist">
<li><a href="#firstmonthlist" class="monthlist">Electronics</a></li>
<li><a href="#thirdmonthlist" class="monthlist">Grocery</a></li>
<li><a href="#sixthmonthlist" class="monthlist">Appliances</a></li>
<li><a href="#nextmonthlist" class="monthlist">Home & Living</a></li>
<li><a href="#previoushmonthlist" class="monthlist">Clothing</a></li>
</ul>
</div>
<div class="monthsdata">
<div class="monthsinnerdata">
<div class="target" id="firstmonthlist">
<p>Electronics</p>
</div>
<div class="target" id="thirdmonthlist">
<p>Grocery</p>
</div>
<div class="target" id="sixthmonthlist">
<p>Appliances</p>
</div>
<div class="target" id="nextmonthlist">
<p>Home & Living</p>
</div>
<div class="target" id="previoushmonthlist">
<p>Clothing</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Comments or Responses

Login to post response