Note that there are some explanatory texts on larger screens.

plurals
  1. POLinking to show specific divs, with animated entrance from the side (within a parent)
    text
    copied!<p>I have a problem related to some jQuery and html/css.</p> <p>I've been working on a side scrolling div, containing several divs, where links refers to one of the "smaller" divs (their entrance should be animated).</p> <p>I found something on the internet, similar to what I want: <a href="http://jsfiddle.net/NGL8P/21/" rel="nofollow">http://jsfiddle.net/NGL8P/21/</a> The difference is that I want one button to link to one special div (but the animation should be basically the same).</p> <p>Here is my version of what I've done so far: <a href="http://jsfiddle.net/jkUzF/2/" rel="nofollow">http://jsfiddle.net/jkUzF/2/</a></p> <p>Each of the bullet points should link to one of those divs. There are 15 buttons, but I only made 5 divs for now. The five divs are positioned after each other (they're not visible due to overflow: hidden).</p> <p>My main container (which contains everything visible) is called: <code>#mainsection</code> The looong div (which should move forth and back) is called: <code>#wrap</code> Those divs that there should be 15 of are called: <code>.container</code></p> <p><strong>EDIT 1:</strong> Someone thought it was to understand what I want, so I'll try to make it clearer:</p> <p>There are 15 round buttons on the site. Each of them should link to one specific DIV (which currently contains some lorem ipsum). Each of these DIV's are lined up after each other, but you cannot see them unless you change overflow to scroll. I want them to come in from the side when i press the button. For example, when I press the 3rd button under "item 1" I want the third div containing lorem ipsum to enter from the side. When I press the 1st button, I want the first Div to enter from the other side. Everything should be animated, and when I "skip" a div (jumps from 1st to 3rd), I want those that I skip (in this case, nr 2) to just "flow" through fast. Was that better?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload