Question

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

Answer 1

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

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