Question

I need some help on this one:

I have to do something like this and my jQuery-knowledge just isn’t enough 🙁

<div id="dog-button"></div>
<div id="cat-button"></div>

<div id="dog"></div>
<div id="cat"></div>

We have two buttons. When you click the dog-button, the dog-div should appear when you click the cat-button, the cat-div appears (on the exact spot but I guess this is just CSS). Its important, that the site loads with the dog and doesn’t show just nothing. Do you have any ideas? 🙁

Answer 1

Here is a jsfiddle of code that will work for you, however to scale you will need to do a small amount of coding (you will need to add to the $(‘#dog, #cat’).hide(); line all the extra divs to hide):

http://jsfiddle.net/KRPZS/

$('div[id$="-button"]').live('click', function () {
    $('#dog, #cat').hide();
    $('#' + $(this).attr('id').replace('-button', '')).show();
});