javascript - How to expand div on click -



javascript - How to expand div on click -

i have widget contains thumbnails. when of thumbnails clicked want expand div reveal more detail (another div block), overlaying widget content pushing content below widget down.

i want effect (as if expanding), using css or javascript.

here's visual:

obviously, expanded greenish box hide 2 bluish boxes.

this not comfort zone @ all, help appreciated.

this can help you: http://jsfiddle.net/cojtfdlz/ style

#thumbs .thumb{cursor: pointer; background-color: red; float: left; margin: 0 20px 0 20px; width: 100px; text-align: center; height: 100px; position: relative;} #thumbs .more{ display: none; position: absolute; width: 380px; top:0; left:0; background-color: blue; color:#fff}

html

<div id="thumbs"> <div class="thumb">1 <div class="more">th1 1111111 ...</div> </div> <div class="thumb">2 <div class="more">th2 2222222 ...</div> </div> <div class="thumb">3 <div class="more">th3 3333333 ...</div> </div> </div> <div style="clear: both;"></div> <div style="background-color: #ccc; height: 200px; margin-top: 50px;"></div>

javascript

var z=999; $(function() { $('.thumb').click(function(){ var $more=$(this).find('.more') $more.css('z-index',z).show(); z++; var h=$more.height(); $(this).height(h); }) $('.more').click(function(event){ event.stoppropagation(); $(this).hide(); $('.thumb').height(100); }) })

javascript jquery css css-transitions

Comments

Popular posts from this blog

java Multi query from Mysql using netbeans -

c# - DotNetZip fails with "stream does not support seek operations" -

c++ - StartServiceCtrlDispatcher don't can access 1063 error -