Drupal Likno Web Accordion Add-in/Module Examples

In the sections below you can view some examples on how to position your accordion created using the Drupal plugin on your site depending on the use case.

How to use the add-in/plugin & download instructions

Here we use the '"Embedded" in Page' positioning option by setting the "Positioning" property in Likno Web Accordion Builder. This makes the accordion to appear inside a Page element(or replace it). For this case we will place the accordion inside our site, by using the 'Block' positioning method of the Drupal module.

First using the Drupal module, you should create (or edit an already existing) accordion. Select the accordion you want to edit. Check the "print 'DIV' element option", and select the 'Block' positioniong. Now copy the 'div id' using the 'Copy' button (item [1] on screenshot) and click 'Save'.

Then, you should switch to the Likno Web Accordion application. For this example we will create a 'New from Example' Project. From the Examples list on the left you should select example05L. Then we go to Project menu item and click the 'New from Example'. Now we can edit the content of the accordion, edit its style and many more.

Go to positioning at the bottom of the screen, and select the "'Embedded' in Page". Also select the "Insert inside Page Element" option (item [2] on screenshot), and finally paste the previous copied ID (item [1] on screenshot)from the Drupal Module, to Element ID:" field (item [3] on screenshot).

Now go to Addins/Drupal Project/Compile Drupal Project item found at the appication menu. The project properties will come up (if you have not already set them). Select the output folder, and the Project Name. Please make sure that it matches the accordion's name at Drupal Module. After selecting the Project Options, the compiled 'ZIP' file, will be produced at the chosen location.

Now it's time to switch back to the Likno Web Accordion Module. 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 [1] on screenshot), select it (item [2] on screenshot), press the "Browse button" (item [3] on screenshot) and upload the file by pressing Save button (item [4] on screenshot).

Now to go to blocks and select the position of the block. You will find a block with the name of the "Block" positioned accordion, that you chose before. Assign a position to this block (in our example we select header as we want it to show up as a banner).
After this you are ready.

This is how the accordion will look in your site's homepage:

Click on the image to view the example live

Here we use the '"Embedded" in Page' positioning option by setting the "Positioning" property in Likno Web Accordion Builder. This makes the accordion to appear inside a Page element(or replace it). For this case we will place the accordion inside our site, by using the 'Shortcode' positioning method of the Drupal module.

First using the Drupal module, you should create (or edit an already existing) accordion. Select the accordion you want to edit. Check the "print 'DIV' element option", and select the 'Block' positioniong. Now copy the 'div id' using the 'Copy' button (item [1] on screenshot) and click 'Save'.

Then, you should switch to the Likno Web Accordion application. For this example we will create a 'New from Example' Project (however you can create virtually anything you want, from examples or from scratch). From the Examples list on the left you should select example01. Then we go to Project menu item and click the 'New from Example'. Now we can edit the content of the accordion, edit its style and many more.

Go to positioning at the bottom of the screen, and select the "'Embedded' in Page". Also select the "Insert inside Page Element" option (item [2] on screenshot), and finally paste the previous copied ID (item [1] on screenshot)from the Drupal Module, to Element ID:" field (item [3] on screenshot).

Now go to Addins/Drupal Project/Compile Drupal Project item found at the appication menu. The project properties will come up (if you have not already set them). Select the output folder, and the Project Name. Please make sure that it matches the accordion's name at Drupal Module. After selecting the Project Options, the compiled 'ZIP' file, will be produced at the chosen location.

Now it's time to switch back to the Likno Web Accordion Module. 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 [1] on screenshot), select it (item [2] on screenshot), press the "Browse button" (item [3] on screenshot) and upload the file by pressing Save button (item [4] on screenshot). Make sure that you have copied the produced shortcode by clicking the Copy button.

Now go and edit the page/article you want. Set the carret at the place you want to insert the accordion. Paste the previous copied Shortocode and click save. AFter this you are ready. The accordion will appear inside the page/article (BUT only on the single view of it).

This is how the accordion will look in your site's page/article single page:

Click on the image to view the example live

Here we use the '"Floating" over Page' positioning option by setting the "Positioning" property in Likno Web Accordion Builder. This makes the accordion to appear floating over page (relative to window or element or image). For this case we will place the accordion inside our site, by using the 'Block' positioning method of the Drupal module.

From Drupal Module create or edit an accordion. Uncheck the "print 'DIV' element option", and select the 'Block' positioniong Switch to Likno Web Accordion builder desktop application.

For this example we will create a 'New from Example' Project. From the Examples list on the left we select example17. Then we go to Project menu item and click the 'New from Example'. Now we can edit the content of the accordion, edit its style and many more.

These are the settings for the Accordion Project "Positioning" property:

Now go to Addins/Drupal Project/Compile Drupal Project item found at the appication menu. The project properties will come up (if you have not already set them). Select the output folder, and the Project Name. Please make sure that it matches the accordion's name at Drupal Plugin. After selecting the Project Options, the compiled 'ZIP' file, will be produced at the chosen location.

Then we go to Likno Web Accordion Drupal plugin. We select the 'Template Tag' (item [1] on screenshot)Accordion Positioning Method and we uncheck the Print 'DIV' (item [2] on screenshot) element checkbox. After that we click save settings. Then we upload the compiled ZIP file by using the "Upload ZIP file button" Now it's time to open the header.php file and copy(item [3] on screenshot)/paste the template tag that accordion produces at Drupal Plugin.

This is how the accordion will look in your site's homepage:

Click on the image to view the example live
(also scroll that page)