<!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
How to define Global Variable in JavaScript?
How to get selected text from a select box using jQuery?
How to scroll page to particular Div on click using jQuery?
jQuery move multi select values from one to another multi select list
How to join string with number in JavaScript?
How to change text after click event using JavaScript?