jQuery web Accordion


Published on

Likno Web Accordion Builder is a powerful WYSIWYG application for creating web accordions. You can create any type of accordion (horizontal accordion, vertical accordion, image accordion etc.).
All the accordions produced are going to work perfectly in all browsers, CMS and devices.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

jQuery web Accordion

  1. 1. General Overview of Likno Web Accordion Builder Likno Web Accordion Builder is a powerful WYSIWYG application that gives you the ability to create stunning jQuery accordions without writing any code.
  2. 2. This is the Welcome Screen that appears when you open Likno Web Accordion Builder. You can choose the example you want to start with and then click on “Create new project from Example”.
  3. 3. This is the Project Panes tab in which you can control the population, the content and the positioning of your accordion.
  4. 4. You have 3 options to populate an accordion: - Populate the accordion panes inside the project: this means that all the content is going to be in the compiled JavaScript file. - Populate the accordion panes inside your page, through a UL/LI structure: this means that you need to place the content in your page in a UL/LI structure. - Populate the accordion panes inside your page, through DIV elements: this means you need to insert your accordion content in your page in a DIV structure.
  5. 5. As for the content of your accordion body, you have various ways to specify it: - Content can be HTML embedded to your project - Content can be an image - Content can be retrieved from another file through AJAX - Content can be an external page or file (HTML, PHP, PDF, DOC, etc.)
  6. 6. You can position the accordion as “Embedded” in the page. Just place a positioning element (with the specified ID) somewhere in the page and the accordion will appear there.
  7. 7. You can also position the accordion as “Floating” over page. If you go with this selection, you can position the accordion Relative to Window, Relative to an existing Element in the page or Relative to an existing Image in the page.
  8. 8. In Style Editor Tab, you are able to set the Accordion Type, the Show/Hide options and the Appearance styling properties.
  9. 9. In the Accordion Type properties you can set the Accordion Behavior (i.e. if the panes are independent or co-dependent), if an accordion pane should be initially open, if the last open panes should be remembered, if the Pane Orientation should be Vertical or Horizontal, etc.
  10. 10. In Show/Hide properties, you can set how (effects) and when (events) you want the accordion to show/hide. You can also set the accordion to play as a slideshow using play/pause buttons.
  11. 11. In Appearance you can set the CSS properties for the Accordion Container, the pane Headers and the pane Bodies.
  12. 12. In Sample Code Tab, you can see the code you need to add to your page for the accordion to be displayed.
  13. 13. In Preview Tab, you can see the preview of the accordion you have created.
  14. 14. In Project Properties Tab, you can set the properties for you project. You can select the Site Root Folder, the name of the compiled JavaScript file and the subfolders for the compiled files and images.
  15. 15. Likno Web Accordion Builder has plugins for Joomla, WordPress and Drupal to help you integrate your accordion to your favorite CMS.
  16. 16. Visit www.likno.com for more information