Question

How can I do this with css and jquery ?

As shown on jsfiddle there is a button in the left column. Clicking on this button slide toggles a div in the right column and 2 other pictures appear (picture number 2, picture number 3)

There are 2 things I would like to do :

1st : Position the button exactly at the bottom left of picture number 1. I can’t actually do it because I don’t know how much text I have in the left column and I don’t know the height of the picture 1.

2nd : When the div is displayed or hidden, I would like the button to move with the div. At the end, the button should be at the bottom left of the picture number 3

Can you help me do that?

The html structure is basic :

<div id="col_1">
    <p>Lorem ipsum<br />...<br /></p>
    <p><span id="button">see more pic</span></p>
</div>

<div id="col_2">
    <div id="pic_1">picture number 1</div>
    <div id="pic" class="hidden">      
        <div id="pic_2">picture number 2</div>
        <div id="pic_3">picture number 3</div>
    </div>
</div>

The jquery is basic :

$("#button").click(function () {
      $("#pic").slideToggle("slow");
    });

The css is also really simple. You can see it on jsfiddle.

Answer 1

You can do position relative. Here is the demo: jsfiddle.net/ar9UB/5/

Added this CSS:

#button { position:relative; left: -90px; top:-20px; }

and moved the button in col 2.

Hope this helps.