Javascript 滑动css和js内容过滤器

我正在制作一个jquery移动应用程序，有一个页面需要过滤一些帖子。 我有张贴以及过滤器的设计

您可以在下面看到它的外观：

我一直在尝试设置它的动画，因此如果用户按下右侧的“社交”，则“外部”和“业务”将被推到左侧，因此您选择的过滤器始终位于中间，在两个分隔符之间

下面是一个我打算用来移动div的js示例，但只用于1 div而不是3 div：

$(function(){
    var c=0;
    $("#click").click(function(){
        $(this).stop().animate({left: ++c%2*100 }, 'fast');
    });  
});

我遇到的问题是，如果用户每次按下右边或左边的按钮，它将需要有无限多个div滑入，我只是想知道如何实现这一点

这是一个JSFIDLE，其中包含我正在使用的资产（没有jquery移动样式）

编辑：这里还有一个gif，如果你不明白我想做什么，我希望发生什么

使用此javascript

$（文档）.ready（函数（）{
$（“#社交_one”）。单击（函数（）{
$（“#侧边滚动”）.animate（{marginLeft:'-=130px'}，500）；
});
});

理论上，我建议您删除html和css中的分隔符（

#divider***

），并将其作为伪分隔符添加到

文本滑块上，如下所示

#text_slider:after {
  content: "";
  position: absolute;
  left: 33%;
  top: 10%;
  bottom: 10%;
  width: 33%;
  border-left: 1px solid white;
  border-right: 1px solid white;
  pointer-events: none;
}

这样做可以保持
侧滚动
清洁，并且在设置动画时仅使用“按钮”

现在你可以简单地激活你的<代码> SIDYRONGROUN/向右或向左，中间有所选的“按钮”，不管它们有多少个。
这是一个伪脚本：
您的意思是当“外部/业务”被推到左侧时，在移动它们之前“社交”的位置会有一个空白区域吗？请将您目前拥有的脚本也添加到您的工作演示中，因为不清楚如何/添加到哪个元素中脚本已附加。@LGSon Hi抱歉，我可能有点困惑，在第二次浏览该js时，我意识到它可能无助于我希望它执行的操作，我制作了一个快速gif，以便您可以看到我希望最终结果的样子。好的，检查我的答案，我想我的方法能帮你轻松解决这个问题。我的建议能帮你解决吗？