jquery div replacement independently

I have 3(or more but here 3) blue DIV displayed and there are 3 more same size red DIV wich are hidden.

What I want to do: when a blue div is clicked this blue div is hidden and replaced by the appropriat开发者_StackOverflow社区e red div(each red div content is going to be different) and other blue div stay blue if these ones have not been clicked.

and then as we click on the red div it hides and display the original blue div back.

My html/css

    <style type="text/css">

        body{width: 900px;}

        #first, #second, #third{background: blue;float: left; margin-right: 100px; width: 200px;height: 200px;color: white;}

        #first-toggle, #second-toggle, #third-toggle {background: red;float: left; margin-right: 100px; width: 200px;height: 200px;color: white;display: none;}


    </style>

<div id="first">I'm an image</div>

<div id="second">I'm an image</div>

<div id="third">I'm an image</div>


<div id="first-toggle">I'm an content</div>

<div id="second-toggle">I'm a content</div>

<div id="third-toggle">I'm an content</div>

I thank you in advance for your future answers or even if you take the time to read it at least ;)

---

Look at this great solution using the most simple html markup.
Copy-paste divs at wish!

D E M O 1

or:

D E M O 2

...and here are my 'just for fun' playarounds

D E M O 3

D E M O 4 with a hover stuff :D

---

You can make use of jquery's hide() and show(). working example here

http://jsfiddle.net/jpezK/4/

---

You can easily use replaceWith in your case.

Check out this working jsFiddle and you'll understand.

More information on replaceWith here

---

Here's a link the solution.. http://jsfiddle.net/ZyBkA/3/

hope this is what you require !