LiteAccordion - a horizontal accordion plugin for jQuery. Slide One1 Slide Two2 Slide Three3 Slide Four4 Slide Five5 <p>Please enable JavaScript to get the full experience. </p> Responsive and WordPress versions available! New! Accordion Pro JS is a responsive version of liteAccordion, with lots of upgrades and new features (vertical accordions!). Download More details and download link for liteAccordion here. Q.
A. Q. A. Q. A. Q. A. Q. A. Q. A. liteAccordion is free to use for commercial and personal projects. If you find any bugs, please file a ticket on Github and I'll fix it as soon as possible. Version 2.2 (21/01/13) Responsive layout and auto scale images options removed After some consideration, I've decided to remove the responsive options. Development status: on indefinite hiatus After this update, I do not plan to continue developing this plugin. New in 2.0! Methods: liteAccordion now has play, stop, trigger next slide, trigger previous slide, destroy and debug methods. Mouseover activation Custom easing Linkable slides 1. 2. Create Accordion Menu Using CSS3 Transition. There are many ways to create an accordion menu, most of them use a javascript library like jQuery to make the effect runs cross browsers. In this tutorial, we’ll see how to make an accordion menu using CSS3 transition.
It works on most modern browsers that support CSS3. HTML Markup The HTML markup of accordion menu is simple: <div id="accordion"> <div class="item"> <a href="#">Products</a> <p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei.
We wrap the accordion menu in a div with id="accordion". Basic CSS We’ll style our accordion menu to make it look good in most browsers: There is one note in this CSS rule: by default, we don’t want to show the content of menu items, so we make it hidden by specify the height of menu item equals to height of its title (including padding) and use CSS property overflow: hidden. The menu looks like this: So, the complete CSS code is: Grid Accordion with jQuery.
Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space. Basic accordion from jQuery UI One way to look at an accordion is like a collapsed single column of a table.
I was recently building a page for a client site, where the information that they provided really made sense to present as a table. But it was too much information to view all at once. Another consideration in this table I was building is that there was enough columns that each individual column (should they have been equal width in the space available) wasn't very wide, maybe 150px.
The Grid Accordion works with the same theory as most other accordions. You can view and download the example at the end of this article. HTML: Classic use of the definition list CSS: trying to stay accessible Share On. jQuery Accordion Tutorial. Elegant Accordion with jQuery and CSS3. Today we will create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering.
We will add some CSS3 properties to enhance the looks. Ok, let’s start with the markup. The Markup The HTML will consist of a list where each accordion tab […] View demoDownload source Today we will create an elegant accordion for content. The Markup The HTML will consist of a list where each accordion tab is a list element. The other list elements will have the classes bg2, bg3 and bg4. The CSS The style for the list will look as follows: The list elements will each have a different background image, so we will first define the general style properties for every list element and then the single classes with the background images: Note, that the box shadow will not work in IE.
Now, we want a nice looking header with a white semi-transparent background for each list item when in the normal “closed” state: Let’s add some magic! The JavaScript And that’s all!