Jquery 使用按钮更改文本显示/隐藏div

我有一个问题，我不知道如何用jQuery来解决，因为我还是一个非常noob的人

我有4个框（或更多），每个框都有一个“查看详细信息”按钮，我需要的是，当您单击“查看详细信息”时，显示一个隐藏的div，其中包含相应的框信息，但还需要在显示隐藏的div时，将按钮更改为“隐藏详细信息”--我可以用toggle来点它，但问题是如果你点击按钮查看另一个框的细节，div不会隐藏，带有“hide Details”的按钮也不会回到默认状态，希望有人能理解并帮助我

<div id="product_id" class="model_box box">
     <h3>title</h3>

    <img src="img/products/product_example.png" alt="" width="200px" height="100px">
    <button id="product_id" href="#model_details_id" class="lightblue nav-toggle view_details">VIEW DETAILS</button>
</div>
<div id="product_id" class="model_box box">
     <h3>title</h3>

    <img src="img/products/product_example.png" alt="" width="200px" height="100px">
    <button id="product_id" href="#model_details_id" class="lightblue nav-toggle view_details">VIEW DETAILS</button>
</div>

标题
查看详细信息
标题
查看详细信息

这是我的小提琴

试试这把小提琴

---

我想你在找这样的东西：

$(document).ready(function() {
    $('#product_id_1').on('click', function(){
        $('#model_details').css('display', 'block');
    });
});

---

我希望您知道，

id

在页面中必须是唯一的，这是一个占位符，对吗？记住要简化您的问题，不要对多个元素使用相同的id。

$(document).ready(function() {
    $('#product_id_1').on('click', function(){
        $('#model_details').css('display', 'block');
    });
});