[prajwala]

I want to show/hide divs on the click of links...how can i achieve this using jquery?

When i click on first link it should show first div...
if i click on 2nd link it shod open 2nd div and hide remaining divs and so on....

Please see the below code

 <div id="core">  
            <div class="page" id="page1">
                <div class="textImage ">
                    <img src="images/img1.png" width="665" height="138">
                    
                </div>
                
                <div class="textImage">
                    <div class="textImage floatLeft">
                        <img src="images/img2.png" width="448" height="177" class="floatLeft">
                        
                    </div>
                    <div class="textImage floatLeft">
                        <img src="images/img3.png" width="432" height="183" class="floatLeft">
                        
                    </div>
                </div>
            </div>
            
            <div class="page"  id="page2" style="display:none">
                <div class="textImage">
                    <div class="textImage floatLeft">
                        <img src="images/img2.png" width="448" height="177" class="floatLeft">
                        
                    </div>
                    <div class="textImage floatLeft">
                        <img src="images/img3.png" width="432" height="183" class="floatLeft">
                        
                    </div>
                </div>
                 <div class="textImage ">
                    <img src="images/img1.png" width="665" height="138">
                    
                </div>
            </div>
            
            <div class="page"  id="page3" style="display:none">
                <div class="textImage">
                    <div class="textImage floatLeft">
                        <img src="images/img2.png" width="448" height="177" class="floatLeft">
                        
                    </div>
                    <div class="textImage floatLeft">
                        <img src="images/img3.png" width="432" height="183" class="floatLeft">
                        
                    </div>
                </div>
                
                <div class="textImage">
                    <div class="textImage floatLeft">
                        <img src="images/img2.png" width="448" height="177" class="floatLeft">
                        
                    </div>
                    <div class="textImage floatLeft">
                        <img src="images/img3.png" width="432" height="183" class="floatLeft">
                        
                    </div>
                </div>
            </div>
           
           <div id="my-carousel-2" class="carousel module">
	    <ul>
		<li><a href='javascript:;' ><img src="images/1.png" width="79" height="79" /></a></li>
		<li><a href='javascript:;' ><img src="images/2.png" width="80" height="80" /></a></li>
                <li><a href='javascript:;'><img src="images/3.png" width="79" height="79" /></a></li>
                <li><a href='javascript:;'><img src="images/4.png" width="80" height="79" /></a></li>
                <li><a href='javascript:;' ><img src="images/5.png" width="79" height="83" /></a></li>
                <li><a href='javascript:;'><img src="images/6.png" width="79" height="83" /></a></li>
                <li><a href='javascript:;'><img src="images/7.png" width="80" height="83" /></a></li>
                <li><a href='javascript:;'><img src="images/8.png" width="79" height="83" /></a></li>
		    </ul>
		</div>
        </div>