Toggle show/hide and replace div content at same time

Question

I'm working on a project where I have a row of product boxes with a button to "View Products" which I need to show a hidden div onclick which contains all the products. When the hidden div is shown, I'd like the content in the div that held the product brand (and "View products" link) to change to just show the product logo and a "HIDE ALL" button.

I have the show/hide toggle working using the script below but not sure how to get the content of the div with the button in it to change and add the toggle to the "HIDE" button? Also, when clicking on another "VIEW Products" button, the other product box should return to the original. I've attached an idea of what I'm doing as I realise my description is probably a little confusing - 'screen1.gif' shows the row of boxes/brands - 'screen2.gif' shows what happens when you click on a brand and that brands other products appear below.

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

Any help would be much appreciated. Thanks, David

Show/Hide toggle script:

<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

you can add a css class in like this:

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

then, when the div gets clicked just add this class to the div, you can use jquery to do this too.

Answer 2

Here is a start. I tried to keep the same structure that you had.

HTML - Add a this to reference the clicked element for each btn_view link onclick="toggle_visibility('all-product-one',this);"

E.G.

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

Example:

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