单击框时隐藏#go_to_top图标

Question

我有这个聊天框和这个go_to_top图标。是否可以在单击并打开框时隐藏图标，并在关闭框时再次显示它？

这是它在我的本地主机（view extern）中的外观：

这是我的ChatBox代码

 <section class="btn-xs bd-section-5 hidden-xs bd-page-width bd-tagstyles" id="section5" data-section-title="Section">
                <div class="bd-container-inner bd-margins clearfix">
                    <div class=" bd-layoutbox-9 bd-page-width  bd-no-margins clearfix">
                        <div type="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="chatbutton bd-container-inner btn btn-default">
                            <h4 class=" bd-textblock-11 bd-content-element">
                                <span style="font-weight: normal;">Call us on</span> <a href="tel:08000125888" draggable="false">0800 0125 888</a>
                            </h4>
                        </div>
                 <div class="panel-collapse collapse" id="collapseOne">
                    <div class="panel-body">
                        <ul class="chat">
                            <li class="left clearfix"><span class="chat-img pull-left">
                                    <img src="./assets/images/<?php echo ($cruise_avatar[0]); ?>.png" alt="<?php echo ($cruise_avatar[0]); ?>" class="img-circle" />
                            </span>
                                <div class="chat-body clearfix">
                                    <div class="header">
                                        <strong class="primary-font"><?php echo ($cruise_avatar[1]); ?></strong> <small class="pull-right text-muted">
                                            <span class="glyphicon glyphicon-time"></span><?php echo date("h:i:s A"); ?></small>
                                    </div>
                                    <p>
                                        <?php echo ($cruise_avatar[2]); ?>
                                    </p>
                                </div>
                            </li>
                            <li class="right clearfix"><span class="chat-img pull-right">
                                <img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
                            </span>
                                <div class="chat-body clearfix">
                                    <div class="header">
                                        <small class=" text-muted"><span class="glyphicon glyphicon-time"></span><?php echo date("h:i:s A"); ?></small>
                                        <strong class="pull-right primary-font">Bhaumik Patel</strong>
                                    </div>
                                    <p>
                                        <?php echo ($cruise_avatar[2]); ?>
                                    </p>
                                </div>
                            </li>                        
                        </ul>
                    </div>
                    <div class="panel-footer">
                        <div class="input-group">
                            <input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." />
                            <span class="input-group-btn">
                                <button class="btn btn-warning btn-sm" id="btn-chat">
                                    Send</button>
                            </span>
                        </div>
                    </div>
                </div>
                    </div>
                </div>
            </section>

单击（view extern）时，它看起来像这样：

我试图用这样的jQuery隐藏它：将它更新为

   <script>
     $(document).ready(function(){
         $(".bd-layoutbox-9").click(function(){
             if ($("span.bd-icon-67.bd-icon").css("display","inline-block")){
                 $("span.bd-icon-67.bd-icon").css("display","none");
             }
             else if ($("span.bd-icon-67.bd-icon").css("display","none")){ 
                 $("span.bd-icon-67.bd-icon").css("display","inline-block");
              }
         });
     });
    </script>

和我的跨度代码

            <div data-smooth-scroll data-animation-time="250" class=" bd-smoothscroll-3">
                <a href="#" class=" bd-backtotop-1 "><span class="bd-icon-67 bd-icon "></span></a>
            </div>

我可以在Chatbox打开时隐藏它，但是当我关闭时它不会再显示。