js实现展开收起功能

有的小伙伴想要写一个展开收起功能，不知道如何下手，今天我这拿出来一个例子给大家作为参考，该页面本来是一个table布局，每行数据都是一个tr，我们实现收起展开，实际上就是对于部分的tr操作。(源码就不附上了，下面做详解)
这个图片非常重要，关系到两个非常重要的数据，注意这个tr的一个calss和id

首先看要隐藏的Tr的class(myhidden)，第一个忽略，我们对第二个进行样式设置

.myhidden{
			display:none !important;
		}

这样页面刚加载进来的时候这个tr里面的内容就会被隐藏起来了，先看效果图吧

如何实现展开呢，看如下代码

<div >
		<a href="javascript:show();" id="my_btn" > 展开↓</a>
</div>

这个展开对应的函数如下

function show(){
			 $("#moredata").removeClass("myhidden");$("#moredata1").removeClass("myhidden");
			 $("#moredata2").removeClass("myhidden");$("#moredata3").removeClass("myhidden");
			 $("#moredata4").removeClass("myhidden");$("#moredata5").removeClass("myhidden");
			 $("#moredata6").removeClass("myhidden");$("#moredata7").removeClass("myhidden");
			 $("#moredata8").removeClass("myhidden");$("#moredata9").removeClass("myhidden");
			 $("#my_btn").html('收起↑');
			document.getElementById('my_btn').href="javascript:hide();";
		}

moredata这个id对应第一张图上面tr的id，即把上诉说的class属性移除掉，my_btn这个id则是把刚才"展开"按钮的文字替换，同时点击事件改变为document.getElementById(‘my_btn’).href=“javascript:hide();”;
再当你点击这个函数的时候(收起)

function hide(){
		 $("#moredata").addClass("myhidden");$("#moredata1").addClass("myhidden");
		 $("#moredata2").addClass("myhidden");$("#moredata3").addClass("myhidden");
		 $("#moredata4").addClass("myhidden");$("#moredata5").addClass("myhidden");
		 $("#moredata6").addClass("myhidden");$("#moredata7").addClass("myhidden");
		 $("#moredata8").addClass("myhidden");$("#moredata9").addClass("myhidden");
		 $("#my_btn").html('展开↓');
		document.getElementById('my_btn').href="javascript:show();";
	}

再把对应id的calss效果添加上，文字再发生改变，点击函数同时改变
到这里就完成了上诉功能了
看运行效果图。进来是这样的

点击展开的时候效果图

希望能用得上