如何用原生js实现展开收起box的功能？

如何用原生js实现展开收起box的功能？
<dl class="member_box dn">
<dt><a id="member_box_root" href="#">Log in</a></dt>
<dd>
2222222222
</dd>
</dl>
<dl class="member_box">
<dt><a id="member_box_root" href="#">Log in</a></dt>
<dd>
2222222222
</dd>
</dl>
<style type="text/css">
.member_box{
border:1px solid red;
}
.member_box dd{
display:block;
}
.member_box.dn{
border:none;
}
.member_box.dn dd{
display:none;
} 
</style>