<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
a{
color:#02D;
text-decoration: none;
}
a:hover{
color:#F50;
text-decoration: underline;
}
.SubCategoryBox{
width: 600px;
margin: 0 auto;
text-align: center;
margin-top: 40px;
border: 1px solid #000;
}
.SubCategoryBox ul{
list-style: none;
}
.SubCategoryBox ul li{
display: block;
float: left;
width: 200px;
line-height: 20px;
}
.showmore{
clear:both;
text-align: center;
padding-top: 10px;
}
.showmore a{
display: block;
width: 120px;
margin: 0 auto;
line-height: 24px;
border: 1px solid #AAA;
}
.showmore a span{
padding-left: 15px;
}
.promoted a{
color:#F50;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
$(function(){
let $category = $("ul li:gt(5):not(:last)");
$category.hide();
let $toggleBtn = $("div.showmore>a");
$toggleBtn.click(function(){
if($category.is(":visible")){
$category.hide();
$(this).find("span").text("Show all brands")
$("ul li").removeClass("promoted");
}else{
$category.show();
$(this).find("span").text("Streamline display brand");
$("ul li").filter(":contains('Canon'),:contains('Nikon'),:contains('Olympus')").addClass("promoted");
}
return false;
})
});
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">Canon</a></li>
<li><a href="#">Sony</a></li>
<li><a href="#">Samsung </a></li>
<li><a href="#">Nikon</a></li>
<li><a href="#">Olympus</a></li>
<li><a href="#">Panasonic</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">Sony</a></li>
<li><a href="#">Samsung </a></li>
<li><a href="#">Nikon</a></li>
<li><a href="#">Olympus</a></li>
<li><a href="#">Panasonic</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">Sony</a></li>
<li><a href="#">Samsung </a></li>
<li><a href="#">Nikon</a></li>
<li><a href="#">Olympus</a></li>
<li><a href="#">Panasonic</a></li>
</ul>
<div class="showmore">
<a href="more.html"><span>Show all brands</span></a>
</div>
</div>
</body>
</html> Most Helpful This Week
Check if a string ends with the given target string
How to declare and print value of variable in JavaScript?
Image Rollover Using onMouseOver and onMouseOut
JavaScript HTML5 Validation for name and email field
Highlight and get the details of table row on click using JavaScript
JavaScript check if first string contains all characters of second string