<!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
Get largest number from each sub-arrays
How to change text color on click using JavaScript?
What's the difference between let and var?
JavaScript simple alert on Click
Highlight and get the details of table row on click using JavaScript
JavaScript calculate Fahrenheit from Celsius
JavaScript sort multi dimensional array on specific columns
Using jQuery add new table row on click
JavaScript convert string variable in boolean using Regex
Generate random password for form field on click using JavaScript