How to expand div on click

Question

I have a widget which contains some thumbnails. When any of the thumbnails is clicked I want to expand the div to reveal more detail (another div block), overlaying the widget content but pushing content below the widget down.

I want to do it with some effect (as if its expanding), using css or javascript.

Here's a visual:

enter image description here

Obviously, the expanded green box would completely hide the 2 blue boxes.

This is not my comfort zone at all, so any help would be appreciated.

Have a try and then post some code or a jsfiddle, the jquery slidetoggle method would be a good place to start — David Jones, Nov 06 '14 at 10:22

score 0 · Accepted Answer · answered Nov 06 '14 at 12:41

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);        
    })
})

score -1 · Answer 2 · edited May 23 '17 at 10:25

This can help you : Pure CSS collapse/expand div
With that fiddle : http://jsfiddle.net/thurstanh/emtAm/2/ :)

HTML :

<body>
<section>
  <article>
    <details>
      <summary>Step by Step Guides</summary>
      <details>
        <summary>Getting Started</summary>
        <p>1. Signup for a free trial</p>
      </details>
      <details>
        <summary>Setting up a backup schedule</summary>
        <p>This step assumes you have already signed up and installed the software</p>
      </details>
    </details>
    <details>
      <summary>Installation/Upgrade Issues</summary>
      <p>After setup the program doesn't start</p>
    </details>
  </article>

  <article>
    <details>
      <summary>SERVER Step by Step Guides</summary>
      <details>
        <summary>Getting Started</summary>
        <p>1. Signup for a free trial</p>
      </details>
      <details>
        <summary>Setting up a backup schedule</summary>
        <p>This step assumes you have already signed up and installed the software</p>
      </details>
    </details>
    <details>
      <summary>Installation/Upgrade Issues</summary>
      <p>After setup the program doesn't start</p>
    </details>
  </article>

css :

 summary::-webkit-details-marker {
  color: #00ACF3;
  font-size: 125%;
  margin-right: 2px;
 }
 summary:focus {
    outline-style: none;
 }
 article > details > summary {
     font-size: 28px;
     margin-top: 16px;
 }
 details > p {
     margin-left: 24px;
 }
 details details {
     margin-left: 36px;
 }
 details details summary {
    font-size: 16px;
 }

Next time post some of your code and your try, we're not here to code for you.

Yes so what ? that's why you downvoted this ? I didn't tell you I wrote this code, I just wanted to be helpful writing directly here. — Nicolas Charvoz, Nov 06 '14 at 11:24
No, I didn't downvote. I'm just saying your answer says "This can help you" and links to _this very question_. I think you got the wrong URL, that's all. If this is a duplicate though, I recommend flagging as such. — Nateowami, Nov 06 '14 at 11:44

How to expand div on click

2 Answers2