Question

I am looking for some way to click on an image or link on a Div and it will slide to another div without changing to height…so something like the below

<div id="div1">
<img src="image.jpg" onclick="slide_to_other_div" />
</div>

<div id="div2" style="display:none">
<p>Another Div Here</p>
</div>

But I don’t want an accordion effect… I want to slide to Div2 without affecting the height?

Explained further …

Suppose you have a table>

<table>
<tr>
  <td id="div1"><a href="#div2">Slide to Div2 Direction --> </a></td>
  <td> id="div2" style="display:none">This is Div 2</td>
</tr>
</table>

So, Div1 scrolls sideways to Div2 when I click on the link to Div2

Answer 1

I’m not entirely sure I know what you want to have happen, but here are a series of steps which might accomplish your goal?

1. Calculate the current image height and explicitly set it so that it won’t change.
2. Calculate the current absolute image position
3. Calculate the absolute div2 position
4. Detatch the image from div1, set it’s style to be position absolute with the absolute position calculated earlier, and attach it to body
5. Animate the top and left properties of the position so it “slides” to the new location
6. Detatch the image from body, remove absolute positioning values, attach it to div2, and show div2

Does that sound like what you are looking for? Each of those steps can be accomplished via jquery.

---

EDIT: Now that I think I’m understanding you more, you are probably looking for a horizontal accordian. You could code this from scratch, but I would suggest looking at existing solutions to guide you (or to simply use). Here is an example of one. Google “horizontal accordian” to find more if that doesn’t suit your fancy.