javascript - Opening element on top of others -

i have grid of images , text. default, image showing. when user clicks image, should expand on others , show text. it's partly working.

http://jsfiddle.net/kbhfh/1/

<div id="container">     <div class="logo">         <img src="http://www.bnl.gov/today/intra_pics/2012/01/intel-logo-110px.jpg" alt="">          <p class="logotext">             ...         </p>     </div>     .... 

if click leftmost icon in top row, want. there problems though.

• when click of icons, other elements slide 1 place closer top leftmost corner because clicked element moves out of it's place due absolute positioning. sliding effect doesn't show in example in jsfiddle because used same images elements.
• if click other icon, expand correctly, except goes leftmost corner in top row. should expand way left (like now) should go higher. if clicked item isn't first 1 in row, should still expand same amount left. clicking again should it's original position.
• you should able open multiple @ same time. if have 1 opened , open 1 opened element should collapse it's default state.

i have messed long time. hope have provided enough details , working.

here demo think satisfies of requirements.

the main problem demo .offsetparent() returns jquery object , not position, when setting css of absolutely positioned element with:

$(element).css({     marginleft: position.left + "px",     margintop: position.top + "px",     position: "absolute",     boxshadow: "0 3px 3px rgba(0, 0, 0, .1)" }); 

position.left , position.top undefined. if use var position = $(element).position(); instead return expected values. however, after doing this, logo opened closed being left on page! furthermore, since positioned logo shared same .logo class created further problems multiple "left over" logos on page being clickable.

so approach .clone() logo , position on top, animate open, remove dom once closed. i've heavily commented javascript should explain in more detail. i've used newer .on() event binding approach instead of .click() reduce amount of event handlers, since using jquery 1.7+. register 2 click event handlers, 1 .logo class , 1 .openlogo class open logos isolated main click event handler.

i not going re-post of html here change made remove <div id="clear"></div> end.

html

<div id="container">     <div class="logo">         <img src="http://www.bnl.gov/today/intra_pics/2012/01/intel-logo-110px.jpg" alt=""/>         <p class="logotext">             lorem ipsum dolor sit amet, consectetur adipiscing elit.          </p>     </div>     <div class="logo">         <img src="http://www.bnl.gov/today/intra_pics/2012/01/intel-logo-110px.jpg" alt=""/>         <p class="logotext">             lorem ipsum dolor sit amet, consectetur adipiscing elit.          </p>     </div>     <div class="logo">         <img src="http://www.bnl.gov/today/intra_pics/2012/01/intel-logo-110px.jpg" alt=""/>         <p class="logotext">             lorem ipsum dolor sit amet, consectetur adipiscing elit.          </p>     </div>     <div class="logo">         <img src="http://www.bnl.gov/today/intra_pics/2012/01/intel-logo-110px.jpg" alt=""/>         <p class="logotext">             lorem ipsum dolor sit amet, consectetur adipiscing elit.          </p>     </div> </div> 

javascript

var $container = $('#container');  $container     .on('click', '.logo', function() {         var $logo = $(this); // wrap in jquery once          // close open logos triggering click (see function below)         $('.openlogo').click();          if ($('.logotext:hidden', this)) { // if logotext hidden             var position = $logo.position(); // position of clicked on logo               // clone existing logo otherwise making existing 1 position:absolute             // cause other logos reflow inside container             var $clone = $logo.clone()                                 // place in same position 1 clicked on                                .css({top: position.top + 'px', left: position.left + 'px'})                                // give style                                .addclass('openlogo')                                // remove original style                                .removeclass('logo')                                // append our clone container                                .appendto($container);              // animate open clone             $clone.animate({                 width: '580px',                 height: '160px'             }, 1000, function() {                 // fade in logotext when animation complete                 $clone.children('p').fadein();             });         }     }).on('click', '.openlogo', function() {         var $openlogo = $(this);          // fade out text first         $openlogo.children('p').fadeout(400, function() {             // , when complete, animate logo original width/height             $openlogo.animate({                 width: '110px',                 height: '80px'             }, 1000, function() {                 // remove clone dom                 this.remove();             });         });     }); 

css

.logo {     width: 110px;     height: 80px;     box-shadow: 0 1px 1px rgba(0, 0, 0, .1);     display:inline-block;     vertical-align:top; }  .openlogo {     position:absolute;     box-shadow: 0 3px 3px rgba(0, 0, 0, .1); }  .logo, .openlogo {     padding: 10px;     margin: 10px;     border-radius: 6px;     background-color: #fff; }  .logotext {     display: none;     padding: 10px;     margin-top: -90px;     margin-left: 140px;     text-align: justify; }  body {     background-color: #00000f }  #container {     width: 640px;     margin: 50px;     border: 1px solid red;     position: relative; }