怎么用原生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>