Umbraco uAccordionTab
Table of Contents
Introduction ........................................................................................................................ 1
Installation .......................................................................................................................... 2
Configuration of uAccordionTab ........................................................................................ 3
Conclusion.......................................................................................................................................7
Created By: www.mindfiresolutions.com
Umbraco uAccordionTab
Introduction:
uAccordionTab Umbraco project is used to maintain visibility of rich text content in accordion, horizontal
and in vertical tabs. Using this you can add jquery accordion or tab to any page of your Umbraco site by simple
creating some nodes in content section and add settings. This project is actually act as an wrapper, like
whatever child nodes you are going to create using 'uAccordionTabNode_Child' document type this will
converted in tabs content.
Features:





Administrator can Add/ Edit tabs or accordions to their site with few clicks only.
Can manage visibility effect either Accordion , Horizontal or Vertical tab form.
Can manage height and width of tab.
Can Include multiple macros or occurrence of uAccordionTab project in same page.
Can edit the contents present inside tabs/ accordions or its title very easily and quickly.
Compatibility:
The uAccordionTab module is well compatible with Umbraco 4.9.x. And .net framework 4.0 and above.
Note:
Before adding of 'uAccordionTab' macro inside your template, please make sure your master template
contain Jquery file or page in which you are using .
uAccordionTab Installation:
Follow the below steps to install uAccordionTab package in your Umbraco website.
Step1: First Go to Developer Section → Packages → And then click on Install Local package , and then choose
file “uAccordionTab_V.1.0.zip” and Load this package.
Step 2: If package installed successfully it will not show any error and After successful installation of package It
will create following node.
Under Settings Section:
Settings-> Document Types:
 uAccordionTabSettings,
 uAccordionTab_ParentNode
 uAccordionTabNode_Child
Under Developer Section:
Developer->Macros-> macro_uAccordionTab
Under Content Section:
Content-> uAccordionTabSettings
uAccordionTab Configuration Settings:
2
Created By: www.mindfiresolutions.com
Umbraco uAccordionTab
Follow the below given steps to configure uAccordionTab Module.
1. First you need to create a parent node inside Content section using 'uAccordionTab_ParentNode ' document
type. To do this go to content section right click over Content and create new node, give some name of node
and select 'uAccordionTab_ParentNode' from 'Choose Document Type:' drop down list.
2. Now you have to create child nodes under the parent node that we have created in above fig. Right
click over parent node having type 'uAccordionTab_ParentNode', create new node using
'uAccordionTabNode_Child' as Document type.
The node called 'Tab1' that we have created in above fig using step 2, will be treated as your tab
content or accordion content. Select Tab1 present within Content section and you will find two tabs at
right side. Content/ html that is going to be added to 'TabContent' editor present under Content tab at
right side will render as description of jquery Tab/ Accordion content in your page.
3
Created By: www.mindfiresolutions.com
Umbraco uAccordionTab
And value of 'Name' field will render as Title of Tab/ Accordion in website. So this description and title
can be edited by the Administrator of the site.
Like you can follow Step 2, to create as many tab/ node that you wants to create. So now you know the
process of adding new parent as well as child nodes using accordion-tab document types.
 Now we need to do AccordionTab Settings. To do so, with installation you will find a node
4
Created By: www.mindfiresolutions.com
Umbraco uAccordionTab
called 'uAccordionTabSettings' or else you can create a new node under Content using
'uAccordionTabSettings' Document Type.
Under 'uAccordionTabSettings' node, Administrator need to provide :
 'Content Node ID' - the node id of parent node that we have created using
'uAccordionTab_ParentNode' document type.
 Tab Type: You can select any type present in drop down list.
 Width: Provide width of your uAccordionTab macro. If not provided it will take it as auto.
 Height: Provide height of your uAccordionTab macro. If not provided it will take it as auto.
4. Now in order to add tabs/ accordions into your website you need to add 'macro_uAccordionTab' macro
to any of your template page and provide node id of ' uAccordionTabSettings'.

First select the node under the content section having document type ' uAccordionTabSettings' and get
its Id present under 'Properties ' tab.

Now go to the Settings, select any of your Template file insert 'macro_uAccordionTab' macro and
provide uAccordionTabSettings node Id as 'Setting Node ID'.
5
Created By: www.mindfiresolutions.com
Umbraco uAccordionTab
Now you can see in your website page 'uAccordionTab' macro will render as below: (In this example , created
two more child nodes under parent node 'My Tabs' called Tab2 and Tab3 as I have created Tab1 above.)
6
Created By: www.mindfiresolutions.com
Umbraco uAccordionTab
Conclusion:
The uAccordionTab module is well compatible with Umbraco 4.9.x. And .net framework 4.0 and above.
Please provide your feedback [email protected]
Mindfire Solutions has deep experience in developing Umbraco Module and provided Umbraco
solution. We will be glad to share our expertise in detail with you. To learn about our Umbraco
expertise and services please visit Umbraco Development Services at www.mindfiresolutions.com.
7
Created By: www.mindfiresolutions.com