Question

I have array of images enclosed in a DIV

Code

<div id='brand'>
   <a href='#brand'><img src='brand.jpg' /> </a>
</div> 

<div id='fashion'>
   <a href='#fashion'><img src='fashion.jpg' /> </a>
</div> 

<div id='trend'>
   <a href='#trend'><img src='trend.jpg' /> </a>
</div> 

<div id='latest'>
   <a href='#latest'><img src='latest.jpg' /> </a>
</div> 

//Display will be like

---

   BrandImage      FashionImage      trendImage     latestImage

---

If i click any one of the images

I want the particular layout (Eg: trendImage clicked)

               BrandImage     FashionImage     latestImage



 trendImage      Text About Image Clicked

---

I am really starting with Jquery so i don’t really have much of an idea about hove to animate the clicked image to the start position and display text based on that image and move the other image above.

—Update

I have Updated My code and Created as JSFIDDLE

JSFIDDLE

Now i can get the div clicked to first but i need to animate it and move other dive above and display text based on clicked link

Answer 1

Try this fiddle: http://jsfiddle.net/KjveG/