How to show and hide submenu in tabs using jquery

Manideepgoud
Posted by Manideepgoud under jQuery category on | Points: 40 | Views : 1312
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

Posted by: Johnsmith11 on: 4/3/2020 Level:Starter | Status: [Member] | Points: 10
We provide Technical Help to our user by a diagnosis of their computer and other devices. And if there is an issue to be solved, we give out the solution. This helps the user to avoid any existing issue.

Visit Our Websites:-

http://www.webrootcomsafee.us/
http://magellan-gps-update.com/
http://turbotax-support.us/
http://officecom-setupz.com/
http://aolmailhelp.com/
http://kaspersky-loginn.com/
Posted by: Johnsmith11 on: 4/3/2020 Level:Starter | Status: [Member] | Points: 10
We provide Technical Help to our user by a diagnosis of their computer and other devices. And if there is an issue to be solved, we give out the solution. This helps the user to avoid any existing issue.

http://www.webrootcomsafee.us/antivirus/how-to-activate-webroot-antivirus/
http://magellan-gps-update.com/magellan-roadmate-update/
http://turbotax-support.us/turbotax-sign-in/
http://www.officecom-setupz.com/support/office-com-myaccount/
http://aolmailhelp.com/
http://kaspersky-loginn.com/

Login to post response