使用按钮引导切换div的正确方法

Question

我正在建立一个基于网络的电子邮件客户端。我想添加一个按钮，如果用户单击它，它将切换div。

我有：

 <a href='#rply' class='btn btn-default btn-xs pull-right' data-toggle='collapse'>Reply</a>

 <div id="rply" class="collapse">
 ...
 </div>

这是工作，但我想要的按钮，以显示div，如果它还没有显示，以便我可以添加创建新的电子邮件，而不仅仅是回复电子邮件的功能。

按钮代码为：

 NEW: <button type="button" id="0:0" name="new_email" class="new_email btn btn-success btn-xs" title="Create a new email!"><span class="el el-icon-file-new"></span></button>

处理它的代码是：

 $('.new_email').on( 'click', function () {
        OpenEmail( 0 );

    if( ! $("#rply").hasClass("in") ){
        $('#rply').toggle();
    }
 } );

这是可行的，但是，如果我使用href隐藏div，然后单击按钮再次显示它，有一个bug，它显示div的内容，但不显示div的背景。背景没有显示，此时无法显示白色。

使用按钮显示div的正确方式是什么？

编辑：

默认情况下，回复div是不可见的。顺序是，我提供了一个电子邮件列表，用户可以单击其中一个，它将显示出来。如果他们决定要回复，他们点击切换div的href链接。如果他们决定创建一个新的电子邮件，他们点击按钮，如果回复div已经可见，它将被隐藏，这是我试图避免的，只有在回复div不可见的情况下才运行按钮的代码。