Joomla Accordion Component

Download and install the Likno Web Accordion Component on Joomla

Step 1: Download the component's ZIP file

Download component for Joomla version 3.x

Step 2: Install the component to your Joomla site

• Login to your Joomla administrator area.
• Install the component by selecting the "Extensions > Extension Manager" item of the Joomla administration menu.
  
  Then, click on "Choose File" and select the pkg_liknowebaccordion.zip file. After you have selected click on "Upload & Install" and you will receive the message "Installing package was successful".
  
  
• When the "Likno Web Accordion Component" is successfully installed, "Likno Web Accordion: Linker Plugin" and "Likno Web Accordion: Accordion Button Plugin" are automatically installed.
  You need to enable them.
  
  Go to plugins manager (found at Extensions > Plugin Manager item of the Joomla administration menu)
  Enable these two plugins:
  Likno Web Accordion: Linker Plugin, and
  Likno Web Accordion: Accordion Button Plugin.

Configure and use the "Likno Web Accordion Builder Component" on Joomla

Step 1: Configure your 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/where your accordion is "positioned" inside your Joomla 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 options the appropriate Page Element is populated by the Likno Web Accordion Builder module, produced by the application.
  • "'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 module position you choose.
    
    - Second sub-option: "Relative to an Element"
    The accordion will float relative to a page element. This Page Element is populated by the Likno Web Accordion Builder module, produced by the application.
    
    - Third sub-option: "Relative to an Image"
    The accordion will float relative to an image filename.
    

  Note: For relative to window and relative to image positioning options, the "module position" does not affect the actual positioning of the accordion. However the module you must assign a position to module and enable it, otherwise it won't appear. Don't forget you can also place it inside a page/article (but this also does not affect it's positioning if it is relative to window or relative to image).

View how positioning works through detailed examples/use cases

Step 2: Setup, Compile and Upload the accordion files

While in Likno Web Accordion Builder desktop application:

• Compile the accordion using the "Add-ins Joomla Project Compile Joomla Project" (item [1] 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. These files will be added in a ZIP file that will contain all the necessary accordion files.
  Also, it is strongly recommended to use a custom unique name for the Compiled JavaScript Project.

  
• Switch back to your Joomla Administration Panel.
  Go to Extension Manager (Extensions Extension Manager)
  Choose the zip file produced when you compiled your accordion project in Likno Web Accordion Builder.
  Click "Upload & Install".
• Now you have uploaded your tab project to your Joomla. You need to place that tabs to your articles.
  Create a new Article or edit your existing ones.
  You will notice that in your Article Editor there is a new button on the bottom called "Accordion"
  
  
• Click on the button "Accordion". This opens a modal window with some options.
  
  Select the accordion you want to place in your article and click "Insert".
  Save your Article and the accordion should appear where you placed it.

Download and install the Likno Web Accordion Component on Joomla

Step 1: Download the component's ZIP file

Download component for Joomla version 1.6 - 2.5

Step 2: Install the component to your Joomla site

• Login to your Joomla administrator area
• Install the component by selecting the "Extensions > Install/Uninstall" item of the Joomla administration menu
• Go to plugins manager (found at extensions/Plugin Manager item of the Joomla administration menu) and enable these two plugins: Likno Web Accordion: Linker Plugin, and Likno Web Accordion: Accordion Button Plugin.

Configure and use the "Likno Web Accordion Builder Component" on Joomla

Step 1: Configure your accordion

Switch to the Likno Web Accordion Builder desktop application:

• Configure your accordion (colors, borders, effects, styles, etc.) through the Likno Web Accordion desktop application.
• Choose how/where your accordion is "positioned" inside your Joomla 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 options the appropriate Page Element is populated by the Likno Web Accordion Builder module, produced by the application. '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 module position you choose.
  
  - Second sub-option: "Relative to an Element"
  The accordion will float relative to a page element. This Page Element is populated by the Likno Web Accordion Builder module, produced by the application.
  
  - Third sub-option: "Relative to an Image"
  The accordion will float relative to an image filename.
  
  

  Note: For relative to window and relative to image positioning options, the "module position" does not affect the actual positioning of the accordion. However the module you must assign a position to module and enable it, otherwise it won't appear. Don't forget you can also place it inside a page/article (but this also does not affect it's positioning if it is relative to window or relative to image).

View how positioning works through detailed examples/use cases

Step 2: Setup, Compile and Upload the accordion files

While in Likno Web Accordion Builder desktop application:

• Compile the accordion using the "Add-ins Joomla Project Compile Joomla Project" (item [1] 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. These files will be added in a ZIP file that will contain all the necessary accordion files.

• Upload the compiled accordion (the ZIP file mentioned above) via the Joomla administrator area. Go to Joomla extension installer by selecting "Extensions > Install/Uninstall" item of the Joomla administration menu. Select the accordion file from the location you selected above and upload it. Your Likno Web Accordion accordion has been successfully uploaded and installed. Now you need to enable this module from Joomla Module Manager, and select it's position or place it inside an article, using the button found at the bottom of your editor.

Download and install the Likno Web Accordion Component on Joomla

Step 1: Download the component's ZIP file

Download component for Joomla version 1.5 (old)

Step 2: Install the component to your Joomla site

• Login to your Joomla administrator area
• Install the component by selecting the "Extensions Install/Uninstall" item of the Joomla administration menu
• Go to plugins manager (found at extensions/Plugin Manager item of the Joomla administration menu) and enable these two plugins: Likno Web Accordion: Linker Plugin, and Likno Web Accordion: Accordion Button Plugin.

Configure and use the "Likno Web Accordion Builder Component" on Joomla

Step 1: Configure your accordion

Switch to the Likno Web Accordion Builder desktop application:

• Configure your accordion (colors, borders, effects, styles, etc.) through the Likno Web Accordion desktop application.
• Choose how/where your accordion is "positioned" inside your Joomla 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 options the appropriate Page Element is populated by the Likno Web Accordion Builder module, produced by the application. '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 module position you choose.
  
  - Second sub-option: "Relative to an Element"
  The accordion will float relative to a page element. This Page Element is populated by the Likno Web Accordion Builder module, produced by the application.
  
  - Third sub-option: "Relative to an Image"
  The accordion will float relative to an image filename.
  
  

  Note: For relative to window and relative to image positioning options, the "module position" does not affect the actual positioning of the accordion. However the module you must assign a position to module and enable it, otherwise it won't appear. Don't forget you can also place it inside a page/article (but this also does not affect it's positioning if it is relative to window or relative to image).

  View how positioning works through detailed examples/use cases

Step 2: Setup, Compile and Upload the accordion files

While in Likno Web Accordion Builder desktop application:

• Compile the tab control using the "Add-ins Joomla Project Compile Joomla Project" (item [1] 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. These files will be added in a ZIP file that will contain all the necessary accordion files.

• Upload the compiled accordion (the ZIP file mentioned above) via the Joomla administrator area. Go to Joomla extension installer by selecting "Extensions > Install/Uninstall" item of the Joomla administration menu. Select the accordion file from the location you selected above and upload it. Your Likno Web Accordion accordion has been successfully uploaded and installed. Now you need to enable this module from Joomla Module Manager, and select it's position or place it inside an article, using the button found at the bottom of your editor.