Drupal Accordion examples
Drupal Accordion/Likno Web Accordion Builder features
The Likno Web Accordion Drupal add-in & module combination has been developed to let you create stylish, feature-rich accordion controls for your sites! You can fully customize your accordions by adding your own non-drupal content with external or internal links, html-rich content, colors, borders, effects, designs of your choice and many more!
1. The Likno Web Accordion Builder Drupal Add-in
This already exists inside your Likno Web Accordion Builder installation (v2.0.200 or above only - no need to download and install separately), and can be accessed through the following menu:
You can use the add-in to compile the accordion for use on your Drupal pages.
2. The Likno Web Accordion Drupal Module
This is the module that you need to install on your Drupal website.
Through the module you can upload the files of your accordion, choose whether or not an anchor element will be printed and finally choose the positioning method of it.
The Drupal module supports 2 accordion positioning methods:
- "Shortcode" method: This means that you can add this accordion inside the post or page that you want, using the drupal editor. Copy the code that the module produces (when has sortcode option selected) and place it inside the page/article you want.
The accordion will appear only on the single view of your page/article.
- "Block" method: A block of the selected accordion is initially created and found in the blocks administration page (should be at 'admin/structure/block'), under the "Disabled Blocks" section. Just drag this block instance and drop it inside the Block Area that you want.
Note 1: You should keep in mind that actual accordion positioning is handled by the Likno Web Accordion Builder application. For example if you create a '"Floating" over page'" accordion, which is set as "Relative to Window", no matter which "Positioning Method" you choose from the Likno Web Accordion Drupal Module the accordion will always appear relative to window.
Download and install the Likno Web Accordion Builder Module on Drupal
Step 1: Download the module's zip file
Download the Drupal 7 module
Download the Drupal 6 module
|License / Size:
This "Module" version (i.e. code installed on Drupal) requires Likno Web Accordion Builder v2.0.200 or above in your PC (click [About] on its [Help] menu to view its version).
Download the latest Likno Web Accordion Builder if not installed yet.
The "Add-in" (i.e. code within Likno Web Accordion Builder) is already included with the installation (since v2.0.200, Jun. 2011), so no separate download link exists for install.
Step 2: Install the module to your Drupal website
Both Drupal 7 and 6
- Extract the file you downloaded in the previous step.
- Upload the entire likno_accordions folder (not just the files inside) to your modules directory in your Drupal site (ROOT/sites/all/modules/).
- Activate the module in your module administration panel (found at "Administer Site building").
Configure and use the Module on Drupal
(for use with Likno Web Accordion Builder)
Step 1: Configure your accordion
While in Drupal:
- Login to the Admin area of your Drupal site.
- Go to the Likno Web Accordion module options.
- Configure accordion options of the accordion.
Switch to the Likno Web Accordion Builder desktop application:
- Step 1 - Configure your accordion (colors, borders, effects, styles, etc.) through the Likno Web Accordion desktop application.
- Step 2 - Choose how your accordion is "positioned" inside your Drupal posts/pages.
While in Likno Web Accordion Builder software, you will find the Positioning property at the bottom of the Project Panes tab.
There are 2 different options to position your accordion in your pages:
- "'Embedded' in page"
Select this option if you want the accordion to appear 'embedded' in your page. There are 3 sub-options:
"Insert inside a page Element (div, span, td, etc)", "Replace a page Element", "Replace a page Image" (by using it's filename).
For the first 2 sub-options you can select from Likno Web Accordion Drupal module to print a page element (you can also choose not to print the page element but to provide Likno Web Accordion application with an already existing Element ID).
Copy the element id from the Drupal Plugin (item  on screenshot, if of course you want to print the element), select "Insert inside a page Element (div, span, td, etc)" or "Replace a page Element" as Container Positioning (item , and paste the previous copied id(item  on screenshot) inside the Element ID field (item  on screenshot).
- "'Floating' over page"
Select this option if you want the accordion to appear 'floating' over your page.
Like the previous option there are also 3 sub-options available.
- First sub-option: "Relative to Window".
The accordion will appear("float") relative to window no matter which Likno Web Accordion Drupal Plugin positioning method you choose. Also if you choose this sub-option there is no need to print an anchor element (again regarding Likno Web Accordion Drupal Plugin).
- Second sub-option: "Relative to an Element"
Copy the element id from the Drupal Plugin (item  on screenshot), select "Relative to an element" tab (item  on screenshot), and paste the previous copied id(item  on screenshot) inside the Element Anchor ID field (item  on screenshot).
- Third sub-option: "Relative to an Image"
The accordion will float relative to an image. There is no need to print an element if you choose this option.
View how positioning works through detailed examples/use cases
Step 2: Setup, Compile and Upload the accordion files
While in Likno Web Accordion Builder software:
- Compile the accordion using the "Add-ins Drupal Project Compile Drupal Project" (item  on screenshot).
Note: When asked for "Site_Root folder" use any local folder on your hard drive you like for the compiled files to be produced.
- Now you can upload the produced ZIP file using the 'Upload ZIP' file button at module settings.
Select the accordion that matches the accordion you created with Likno Web Accordion Builder application. Using the "Upload accordion files" panel, browse to the location that the compiled accordion was produced(item  on screenshot), select it (item  on screenshot), press the "Browse button" (item  on screenshot) and upload the file by pressing Save button (item  on screenshot).
Note: The name of the accordion is again the one you selected in the options of the module (default is 'accordion'). You can change these options in the Tools Project Properties Folders in the Likno Web Accordion Builder application. It is strongly recommended not to edit the above properties, just leave them default.