Write a html/javascript/ program using JQuery If user click on any of the catego
ID: 3812469 • Letter: W
Question
Write a html/javascript/ program using JQuery
If user click on any of the category (which actually is an h2 heading), the products will show up. For example, the following is when Laptops category was clicked
Similar when the user click on Printers, three links of three printers will be shown.
Now assuming instead of click on the third category, user click on Dell tablet link. an image related to Dell tablet will appeared as the following screen.
Explanation / Answer
<!DOCTYPE HTML>
<html>
<head>
<style>
#nav {
float: left;
width: 280px;
border-top: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;
}
#nav li a {
display: block;
padding: 10px 15px;
background: #ccc;
border-top: 1px solid #eee;
border-bottom: 1px solid #999;
text-decoration: none;
color: #000;
}
#nav li a:hover, #nav li a.active {
background: #999;
color: #fff;
}
#nav li ul {
display: none; // used to hide sub-menus
}
#nav li ul li a {
padding: 10px 25px;
background: #ececec;
border-bottom: 1px dotted #ccc;
}
</style>
<script>
$(document).ready(function () {
$('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
});
</script>
</head>
<body>
<ul id="nav">
<li><a href="#">Laptops</a>
<ul>
<li><a href="#">HP Laptops</a></li>
<li><a href="#">Dell laptops</a></li>
<li><a href="#">Samsung laptops</a></li>
</ul>
</li>
<li><a href="#">Tablets</a>
<ul>
<li><a href="#">HP tablets</a></li>
<li><a href="#">Dell tablets</a></li>
<li><a href="#">Samsung tablets</a></li>
</ul>
</li>
<li><a href="#">Printers</a>
<ul>
<li><a href="#">HP Printers</a></li>
<li><a href="#">Dell Printers</a></li>
<li><a href="#">Samsung Printers</a></li>
</ul>
</li>
</ul>
</body>
</html>
The above code will create a HTML page which has a collapsible menu as required in the question.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.