Likno Web Accordion Builder is a user-friendly interface (GUI) to the popular jQuery open source library, that allows you to create stylish, feature-rich jQuery accordion & slider controls for your web pages, with minimal effort and coding.
All the jQuery accordion & slider controls it creates are cross-browser and work alike in all browsers.
Scroll down for info on major features.
Note: the above are just screenshots.
Visit the "examples" page to view videos on how a user actually interacts with an accordion.
- Rich and powerful interface!
(click the image below to see the application's interface)
Firefox, Chrome, Safari, Opera, Mozilla, Konqueror and
Windows, Mac OS X, Linux, smartphones (iPhone, Android,
Windows Phone, BlackBerry 6+) and more.
Works with all authoring tools (such as Dreamweaver, Expression
Web, NetObjects Fusion, CoffeeCup, etc.), even a simple text editor!
Works with all
CMS and Blogs (such as WordPress, Joomla, Drupal, Typo3, DotNetNuke, Expression Engine,
CMS Made Simple, etc.).
- Create cross-browser jQuery accordions to display content when visitors click on (or even mouse over!) page elements (accordion headers) of your choice.
- Use simple text, HTML code, images, videos (YouTube, etc.), animations, Flash, or whole pages (AJAX, URL) as content in your accordions.
- Create projects fast by using ready-made examples already installed in the application.
- Universal: Use in all authoring tools (Dreamweaver, Expression Web, etc.) and CMS platforms (Joomla, Drupal, Wordpress, etc.).
- Create any type of jQuery accordion control, such as:
- Create both vertical and horizontal accordions, with headers on any side (Top, Bottom, Left, Right). Panes can open/close horizontally too!
- Set the accordion panes as co-dependent (only 1 pane open at any time) OR totally independent (any number of panes open at any time).
- Use any of 3 methods to populate your accordions with content:
1. populated by the project properties (within the application)
2. populated by a UL/LI structure, located inside your page.
3. populated by DIV elements, located inside your page.
- Position your accordions easily on page and anywhere you like, with many options:
1. Insert into a page element of your choice (div, span, td, etc.).
2. Replace a page element (vs "insert into").
3. Replace an image of your choice.
4. Float, relative to the browser window (any corner).
5. Float, relative to a page element of your choice (any corner).
6. Float, relative to an image of your choice (any corner).
- Customize the style of your accordion through CSS ("css accordions").
- Apply images creatively to create interesting accordions (images on accordion headers, image-based backgrounds etc.).
- Use multiple accordion controls on the same page (with the same or different styling).
- Add dynamic content (database-driven or programmable) to your accordions through AJAX techniques ("ajax accordions").
- Show and hide the panes in your accordion using a variety of show/hide effects.
- Optionally use an "Indicator" image on the headers of the accordion panes (panes can open/close when clicking on that image instead of their entire header area).
- Set as initially open (on page load): a specific pane OR all panes OR no pane OR a "random" pane.
- Choose the "Remember last open panes when user revisits"
option, if you want your users to see the accordion as they left it when they return back to its page.
- Make the accordion behave as a "SlideShow": its panes opening automatically, one at a time, at specified duration and direction, with looping or not, pause on "mouse over" and more.
- Use the "Resizable Panes" feature
for vertical accordions; user can resize a vertical
pane by dragging its bottom border.
view this feature live in our Knowledge Base
Screenshot of an accordion using "resizable panes":
Use "Example 20 (FAQ)" to create a FAQ, which applies the following concepts:
- *Clean styling* is used on pane headers (no background color or border in their CSS).
- *Show All/Hide All* links are used outside the accordion (placed anywhere in page).
- *Indicator* set is used in headers (the plus/minus icons).
- *Indicator image only* is used to show or hide panes (instead of their entire Header).
- *Independent panes* are used (any number of panes can be open at any time).
- Use complete help for all properties and procedures. Press F1 while you are on a property to immediately receive Help for that property.
- Access additional designs (examples) of accordion controls, besides the designs coming with the application (note: applies to "Unlimited Domains" users).
- Powered by the popular jQuery open source library.
Likno Web Accordion Builder
Create cross-browser, feature-rich jquery accordion & slider controls easily!