Javascript 我尝试了使用jquery的简单拆分器，但不起作用

我有两个div，一个div类是“.section”，另一个div类名是“more section wrapper”和“more section wrapper”，其头类称为“more section header”。单击“更多节标题”后，我将尝试调整两个div的宽度，如下所示

$(".more-sections-wrapper").css("width","20px");
                    $(".sections").css("width","810px");

之后，我尝试删除更多节包装器并添加新的类名less-section包装器，并在单击less-section包装器时进行了上述宽度调整

我试图做拆分，但点击。更多的节头类宽度被调整，但点击较少的节包装类后，它不起作用

请检查我下面的代码

$(".more-section-header").click(function() {
    $(".more-sections-wrapper").css("width","20px");
    $(".sections").css("width","810px");
    $(".more-section-header").removeClass('more-section-header').addClass('less-section-header');
    }).find(".less-section-header").click(function() {
        $(".less-sections-wrapper").css("width","347px");
        $(".sections").css("width","495px");
        $(".less-section-header").removeClass('less-section-header').addClass('more-section-header');
  });

HTML结构如下所示

           -----------------------------------------------
           |                        |                     |
           |                        |                     |
           |                        |                     |
           |                        |                     |
           |                        |                     |
           ------------------------------------------------

请建议一个在jquery中实现简单拆分器的解决方案，这是您想要实现的吗

---

是动画版本。

谢谢纳拉姆，但是如何添加动画功能。