无法在jquery

Question

我正在尝试使用jquery模拟聊天窗口的最小化，最大化和关闭功能。

我有一个带有'持有人'类的父div，在其中我有一个iframe和一个div（.bar）。

对于最小化功能，我试图隐藏持有者div和iframe，同时使用replaceWith函数保持bar div。

然而，在最大化时，我无法显示持有者和iframe。

这是代码 -

<div class="holder"> 
<iframe id="lsframe" src="http://www.digitech.ch/" width="auto" height="auto">
</iframe>
<div class="bar">Chat<div>
<span class="span1">-</span> &nbsp;&nbsp;<span class="span2">&#10005;</span>
</div>
</div> 

Jquery -

    $('.span1').on('click', function() {
      if ($(".span1").text() == "-") {
        $(".span1").html('□');
        $('.holder').replaceWith(function() {
          return $('.bar', this);
        });
      } else {
        $('#lsframe').show();
        $('.holder').show();
        $('.bar').show();
        $(".span1").text('-');
        //$('.holder').css('visibility', 'visible');                   
      }
    });
    $('.span2').on('click', function() {
      $('#lsframe').fadeOut();
      $('.holder').fadeOut();
      $('.bar').fadeOut();
    });

这是工作模式 - https://jsfiddle.net/sathish_panduga/mbwup2t6/2/

我试图隐藏父div（holder）和iframe以最小化功能，但它不起作用，因为如果我隐藏父元素，一切都会隐藏。

请您指出我正在做的错误，我该如何实现？ 有没有更好的方法来实现这些最大化和最小化功能？