Golang React JS Technology Blog

How to show hide option list items using jQuery?

<!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 jQuery move multi select values from one to another multi select list How to get selected text from a select box using jQuery? How to build simple tabs with jQuery? How to current URL, HOST and URL attributes using JavaScript or jQuery? How to scroll page to 1000px from top on page load using jQuery?