展开和收起多个选项

html+js

• html部分：

<ul id="list">
  <li>尼康</li>
  <li>佳能</li>
  <li>索尼</li>
  <li>宾得</li>
  <li>爱国者</li>
  <li>欧巴</li>
  <li>海鸥</li>
  <li>卡西欧</li>
  <li>三星</li>
  <li>松下</li>
  <li>其它品牌</li>
</ul>
<button data-toggle="brandlist">收起</button>

•  css部分：

ul {
  list-style: none;
}
li {
  margin: 0;
  padding: 0;
  display: inline-block;
  width: 30%;
}

 js部分：

<script src="jquery-2.1.4.min.js"></script>

<script>
$('[data-toggle=brandlist]').click(e=>{
	if($("#list").is(":has(:hidden)")){
		$('#list>li').show();
		$(e.target).html('收起');
	}else{
		$('#list>li:gt(4):not(:last)').hide();
		$(e.target).html('展开')
	}
})
</script>