vertical timeline jquery

11:09 pm, March 6, 2018

a nice simple small vertical timeline plugin (~4k) Vertical Timeline is a responsive, jQuery-based generator that builds a timeline based on user input. It comes with a number of customization options out of the box such as displaying dates, alternating toggle, animation, and choosing which side it starts on. It comes with little to no styling other than what it required, so it can be styled to suite your specific needs. I originally created a timeline for my personal website, however I have since found a number of possible reuse options for it, so I decided to create this simple plugin. Official Site: http://ryanfitzgerald.github.io/vertical-timeline/

Code

html

<h1>Example Usages of Vertical Timeline</h1>
<h2>Default Values</h2>
<div id="vt1">
    <div data-vtside="left">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div>
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div>
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
</div>
<h2>Defining Dates</h2>
<div id="vt2">
    <div data-vtdate="January 2017">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="January 2017">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="January 2017">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
</div>
<h2>Start Right</h2>
<div id="vt3">
    <div data-vtdate="January 2017">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="January 2017">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="January 2017">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
</div>
<h2>No Alternate, No Arrows</h2>
<div id="vt4">
    <div data-vtdate="September 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="March 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="January 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
</div>
<h2>"Fade" Animate</h2>
<div id="vt5">
    <div data-vtdate="September 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="March 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="January 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="September 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="March 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="January 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
</div>
<h2>"Slide" Animate</h2>
<div id="vt6">
    <div data-vtdate="September 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="March 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="January 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="September 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="March 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
    <div data-vtdate="January 2016">
        <h3>Lorem ipsum dolor sit amet</h3>
        <p>
            Proin mattis nisl non est dapibus elementum. Etiam varius, purus sodales varius tempor, mauris nunc hendrerit velit, vitae interdum quam erat non lorem. Fusce luctus malesuada neque nec pretium. In sed turpis dui.
        </p>
    </div>
</div>

vertical timeline jquery

Code

Download & Run

Preview