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

Question

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

我可以使用下面的脚本来显示/隐藏切换功能，但不确定如何使用按钮来更改div的内容并将其添加到“隐藏”按钮吗？ 同样，当单击另一个“查看产品”按钮时，另一个产品框应恢复为原始。 我已经附上了我正在做的事情的想法，因为我意识到自己的描述可能有点混乱-“ screen1.gif”显示了盒子/品牌的行-“ screen2.gif”显示了点击品牌时发生的情况以及该品牌的其他产品出现在下方。

屏幕1- http://hoohoots.com/dev/screen1.gif屏幕2- http://hoohoots.com/dev/screen2.gif

任何帮助将非常感激。 谢谢大卫

显示/隐藏切换脚本：

<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>

Answer 1

您可以像这样添加css类：

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

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

Answer 2

这是一个开始。 我试图保持与您相同的结构。

btn_view link添加一个this来引用每个btn_view link onclick="toggle_visibility('all-product-one',this);"的clicked元素onclick="toggle_visibility('all-product-one',this);"

例如

<div class="btn_view"><a href="#" onclick="toggle_visibility('all-product-one',this);">VIEW ALL</a></div>

jQuery的

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);
}

例：

http://jsfiddle.net/trevordowdle/d2cXB/9/