.: XHTML, CSS & JavaScript Gallery :.
Horizontal Accordion JavaScripts
These scripts turn an ordinary UL list into a horizontal accordion! Move your mouse over a text block to expand it side ways while contracting its peers. The HTML markup of the Accordion can either be defined inline on the page, or inside an external file instead and fetched via Ajax. Plus you can specify which text block should be expanded by default, whether to persist the last expanded panel (within a browser session), and also, expand a particular panel by passing in different parameters into the URL string. All this makes for a versatile, smooth horizontal accordion!
Demo 1: Hover over the text blocks below to reveal the full content.
-
This accordion content has a custom full width of 350px.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum et tellus. Morbi faucibus, eros id tempor mattis, nisl diam fringilla arcu, et rutrum massa neque eu eros. Sed blandit, lacus congue aliquet blandit, enim magna dignissim orci, et lacinia ligula odio sed neque. Praesent consectetuer. Integer consectetuer tristique dui. -
This accordion content has a custom full width of 450px.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum et tellus. Morbi faucibus, eros id tempor mattis, nisl diam fringilla arcu, et rutrum massa neque eu eros. Sed blandit, lacus congue aliquet blandit, enim magna dignissim orci, et lacinia ligula odio sed neque. Praesent consectetuer. Integer consectetuer tristique dui. Aliquam condimentum tincidunt dolor. Pellentesque volutpat porttitor lacus. Donec lacus ipsum, mollis non, congue sit amet. -
This accordion content has a custom full width of 550px.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum et tellus. Morbi faucibus, eros id tempor mattis, nisl diam fringilla arcu, et rutrum massa neque eu eros. Sed blandit, lacus congue aliquet blandit, enim magna dignissim orci, et lacinia ligula odio sed neque. Praesent consectetuer. Integer consectetuer tristique dui. Aliquam condimentum tincidunt dolor. Pellentesque volutpat porttitor lacus. Donec lacus ipsum, mollis non, congue sit amet, auctor laoreet, sapien. Praesent consequat purus sit amet nisl. Vestibulum lacus. Duis dapibus. -
This accordion content has a custom full width of 640px.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum et tellus. Morbi faucibus, eros id tempor mattis, nisl diam fringilla arcu, et rutrum massa neque eu eros. Sed blandit, lacus congue aliquet blandit, enim magna dignissim orci, et lacinia ligula odio sed neque. Praesent consectetuer. Integer consectetuer tristique dui. Aliquam condimentum tincidunt dolor. Pellentesque volutpat porttitor lacus. Donec lacus ipsum, mollis non, congue sit amet, auctor laoreet, sapien. Praesent consequat purus sit amet nisl. Vestibulum lacus. Duis dapibus. Aliquam condimentum tincidunt dolor. Pellentesque volutpat porttitor lacus.
Demo 2: Hover over the text blocks with the images below to reveal the full content.
-
Vincent Willem van Gogh (30 March 1853 - 29 July 1890) was a Dutch Post-Impressionist painter whose work had a far-reaching
influence on 20th century art for its vivid colors and emotional impact. He suffered from anxiety and increasingly frequent bouts of
mental illness throughout his life, and died largely unknown, at the age of 37, from a self-inflicted gunshot wound. -
Today, he is widely regarded as one of history's greatest painters and an important contributor to the foundations of modern art.
Van Gogh did not begin painting until his late twenties, and most of his best-known works were produced during his final two years.
He produced more than 2,000 artworks. -
He was little known during
his lifetime, however his work was a strong influence on the Modernist art that followed, and today many of his pieces-including his
numerous self portraits. Van Gogh spent his early adulthood working for a firm of art dealers and traveled between The Hague, London and
Paris, after which he taught in England. -
During this time he began to sketch people from the local community, and in 1885 painted his first major work The Potato Eaters.
His palette at the time consisted mainly of sombre earth tones and showed no sign of the vivid coloration that distinguished his later work.
In March 1886, he moved to Paris and discovered the French Impressionists. -
His work grew brighter in color and he developed the unique and highly recognizable style which became fully realized during
his stay in Arles in 1888. The extent to which his mental illness affected his painting has been a subject of speculation since his death.
Despite a widespread tendency to romanticise his ill health, modern critics see an artist frustrated by the inactivity and incoherence
brought about by his sickness.
Expand 1st Panel | Expand 2nd Panel | Expand 3rd Panel | Expand 4th Panel | Expand 5th Panel
- JavaScript - Dynamic Drive -
Last updated:
© copyright:Wouter's Designs.
This document may not be translated, duplicated, redistributed or otherwise appropriated.