Javascript 同时切换显示/隐藏和替换div内容

我正在做一个项目，我有一排产品框，其中有一个“查看产品”按钮，我需要显示一个隐藏的div onclick，其中包含所有产品。当显示隐藏的div时，我希望保存产品品牌（和“查看产品”链接）的div中的内容更改为仅显示产品徽标和“全部隐藏”按钮

我有显示/隐藏切换工作使用下面的脚本，但不知道如何获得div的内容，其中的按钮，以改变和添加切换到“隐藏”按钮？此外，当点击另一个“查看产品”按钮时，另一个产品框应返回到原始状态。我已经附上了我正在做的一个想法，因为我意识到我的描述可能有点混乱-'screen1.gif'显示了一行框/品牌-'screen2.gif'显示了当你点击一个品牌时会发生什么，其他品牌的产品出现在下面

屏幕1- 屏幕2-

任何帮助都将不胜感激。 谢谢 大卫

显示/隐藏切换脚本：

<script type="text/javascript">
function toggle_visibility(id) {
    event.preventDefault();
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';

    hideAllBut(id);
}

function hideAllBut(id) {
var lists = document.querySelectorAll('.reveal');
for (var i = lists.length; i--; ) {
    if (lists[i].id != id) {
        lists[i].style.display = 'none';
        }
    }
}
</script>

功能切换\u可见性（id）{
event.preventDefault（）；
var e=document.getElementById（id）；
如果（e.style.display='block'）e.style.display='none'；
else e.style.display='block'；
hidealbut（id）；
}
函数HIDEALBUT（id）{
var list=document.querySelectorAll（'.discover'）；
对于（var i=lists.length；i--；）{
if（列出[i].id！=id）{
列出[i].style.display='none'；
}
}
}

您可以在中添加css类，如下所示：

.clicked{
    background-color:black;
    // other css code here
}

---

然后，当单击div时，只需将该类添加到div中，您也可以使用jquery来执行此操作。

这里是一个开始。我试着保持和你一样的结构

HTML-添加一个

this

以引用每个

btn\u视图链接的单击元素
onclick=“toggle\u visibility（'all-product-one'，this）；”

例如

例如：

您当前的代码可以重写为
函数toggle_visibility（id）{event.preventDefault（）；$（'#'+id）.toggle（）；hidealbut（id）；}函数hidealbut（id）{$（'.reveal'）。而不是（'#'+id）.hide（）}
有没有可能看到它是用小提琴写的，因为我对jQuery有点不了解？这就是在jQuery中向元素添加类的方式：$（“#ELEMENTID”）.addClass（“单击”）；谢谢如何编写该函数，以便在单击产品框4上的“查看产品”按钮时，小产品框2恢复到其原始状态？此函数将从元素中删除添加的类，以便您可以在div上循环，删除先前添加的类，然后将其重新添加到新单击的div中，下面是删除类的函数：
$（“#ELEMENTID”）.removeClass（“单击”）不确定这在这种情况下是否有效，因为我正在更改的不是真正的类，我正在两个分区之间切换-单击按钮时显示隐藏分区，单击其他产品系列的另一个按钮时再次隐藏Hanks Trevor，这是一个很大的帮助。。。非常感谢。
<div class="btn_view"><a href="#" onclick="toggle_visibility('all-product-one',this);">VIEW ALL</a></div>

function toggle_visibility(id,el) {
    event.preventDefault();
    $('.btn_view a').html('VIEW ALL');
    $('.price-text').show();
    var e = document.getElementById(id);
    if (e.style.display == 'block') 
    {
        e.style.display = 'none';
        $(el).html('VIEW ALL');
    }
    else 
    {
        e.style.display = 'block';
        $(el).html('HIDE ALL');
        $(el).parent().parent().find('.price-text').hide();
        //$(el).parent().prev('.price-text').hide();
    }

    hideAllBut(id);
}