使用jQuery-.show/.toggle/.hide创建Div按钮？

我有4个按钮，它们是用CSS设计的div。我想要的是在每次单击按钮时显示/隐藏包含在另一个Div中的数据

我正在使用jQuery来实现这一点，目前我有以下代码：

<script type="text/javascript">
    $(document).ready(function () {
        $("#aboutbody").hide();
    });
</script>
<script>
    $(document).ready(function () {
        var $aboutbody = $('#aboutbody');
        $('#about').on('click', function () {
            $aboutbody.show();
        });
    });
</script>

about是我的按钮，aboutbody是我想显示的内容。我已经尝试为我所有的按钮复制上面的代码，这些按钮可以正常工作，但是它们只有在按相应顺序单击时才会显示

$(document).ready(function(){});

应该只使用一次。您输入的是文档准备加载时将执行的代码

您的第二个body div位于firstbody div中，所以是的，它需要显示firstbody

<div id="firstbody">
    <div class=".main">
        Information to be displayed when First is clicked ont
    </div>
</div><br><br>

<div id="secondbody">
    <div class=".main">
        <span>Information to be displayed when second is clicked</span>
    </div>
</div>

<div id="thirdbody">
    <div class=".main">
        <span>Information to be displayed when Third is clicked</span>
    </div>
</div>

---

这是小提琴：

按相应顺序单击时，您的意思是什么？你能做一把小提琴吗？你应该意识到在HTML页面中只有一个关于身体的唯一id，我的意思是你必须先点击按钮1，然后才能点击按钮2。然后点击按钮2，然后再点击按钮3。你能按照Hannan Hossain的要求做一把小提琴吗？那太好了。我当然每次都在更改Div按钮ID和Div内容ID。哦，顺便说一句，别忘了总是关闭一个HTML标记，考虑span和Div元素！