Microsoft Sharepoint Web Parts

Tabs & Accordion List SharePoint Web Part

Accordion Layout Tabs Layout FAQ Example FAQ The "Tabs  & Accordion" web part helps you to save screen space, focus attention and have more content available instantly with only one click. The web part groups list items by a group field you select in either accordion or tabs style and displays the list items of only one group at a time. Thus is allows to focus the attention of the user to specific information. Moreover it allows you to format group fields and list items with HTML and CSS code and add informative words. Thus lists can be presented in a fully customized and user friendly way. You can configure the following web part properties: The list you want to show The list view to sort and filter the list items The grouping field by which you want to group the list items The list items (content) you want to show The template to customize the presentation of the list items (content) Optional search filters for interactive searching/filtering SharePoint 2019/SE 'Modern' version » Product Price Tabs & Accordion List Web Part for Sharepoint 2010 30 day Evaluation Version Free Tabs & Accordion List Web Part for Sharepoint 2013  30 day Evaluation Version Free Tabs & Accordion List Web Part for Sharepoint 2016  30 day Evaluation Version Free Tabs & Accordion List Web Part for Sharepoint 2019 and SE  30 day Evaluation Version Free Tabs & Accordion List Web Part License Key per Server License USD 190.00 Deployment  Instructions for SP 2010 Deployment  Instructions for SP 2013/2016/2019/SE Deployment  Instructions for SP 2019 "modern" pages You can also send us a PO via e-mail to [email protected]

Installation Instructions:

1. download the Web Part Installation Instructions (PDF file, see above) 
   
2. either install the web part manually or deploy the feature to your server/farm as described in the instructions.
   
3. Configure the following Web Part properties in the Web Part Editor "Miscellaneous" pane section as needed:
   
   

   Site Name: Enter the name of the site that contains the List or Library: - leave this field empty if the List is in the current site (eg. the Web Part is placed in the same site) - Enter a "/" character if the List is contained in the top site - Enter a path if the List in in a subsite of the current site (eg. in the form of "current site/subsite") List Name: Enter the name of the desired Sharepoint List or Library Example: Project Documents View Name: Optionally enter the desired List View of the list specified above. A List View allows you to specify specific data filtering and sorting. Leave this field empty if you want to use the List default view. Group By: optionally enter the List column to define the grouping. Example: Department Nbr. of List Items: enter the maximum number of items to be displayed. Enter "0" to display all items. Navigation Type: choose one of the below Navigation types. - None - Tabs - Accordion - Tiles - Cards The "Cards" type displays the list items as cards: Template Type: choose one of the below Template types. - List - Bullets - Table Field Template: enter the desired List fields surrounded by curly braces. You can specify HTML tags and CSS styles to freely format the text. If you choose the "Table" Template Type setting, you can add the table column separators by entering "|" pipe characters. Example: {Picture} | <b>{Title}</b><br>{Description} | <b>{Price}</b> Item CSS Style: enter optional CSS styles to format the list items. Group Header CSS Style: enter optional CSS styles to format the group headers Webpart CSS Style: enter optional CSS styles to format the web part container. Header Text: display the optional web part header text. You can include HTML tags as needed. Footer Text: display the optional web part footer text. You can include HTML tags as needed. Search Filters: optionally enter one or more List columns (separated by semicolons) to allow for interactive searching. Example: LastName;FirstName If you want to display a search filter as a dropdown combo, please enter it with a leading "@" character: LastName;FirstName;Department;@Office Friendly Search Box Labels: If you would like to display a “friendly label" instead of the default property name please append it to the User property, separated by the “|” pipe symbol. Example: WorkPhone|Office Phone;Office|Office Nbr Align Search Filters vertically: allows you to align the seach input boxes vertically to save horizontal space: Show Table Headers: display the table headers when choosing the "Table" template type. Open Links in popup window: open the links in a Sharepoint dialog windor or in a new browser tab. Show 'Add New Item' Button: display the button to add  new list items (contributors only). Show 'Template Edit' Button: display the button to edit the web part's "FIeld Template" setting (contributors only). Options: enter any additional options as needed. License Key: enter your Product License Key (as supplied after purchase of the Web Part license key). Leave this field empty if you are using the free 30 day evaluation version.

Please enter a comment below if you have problems with the installation, want to give feedback or have suggestions for improvements:

User Comments	Post a Comment
Tim Carlson   8/10/2021 18:35  Is the tabs/accordion web part available for O365? Juerg   8/10/2021 18:41  Tim, we have the „Accordion” web part for Office 365: https://amrein.bitalus.com/products/webparts/o365/accordion However, it has no feature to display the groups as tabs. Sascha   8/11/2021 16:19  Is it possible to create an accordion within an accordion so that it can be expanded twice? How can I move the Webpart anywhere on the page? Juerg   8/11/2021 17:57  Sascha, the Tabs & Accordion web part currently only supports a single expansion level. However, you can create a two-lecel accordion using the "List Search" web part (see /apps/page.asp?Q=5805): Just send an e-mail to [email protected] so we can give you the detailed configuration settings. Justin   8/12/2021 00:02  Is there an option to "pre-expand" all accordion/rows? Juerg   8/12/2021 12:19  Justin, we have now added the new “expandall” option (to be added to the web part’s “Options” setting): expandall=1 Please re-download the web part and then update the solution. Justin   8/12/2021 16:53  Thanks! A couple more features would also help……they were on the previous version of this web part: Pre-expand only the first accordion/row (so people know it can be clicked and opened) Add “ group header template”: sometimes people want to display more info on the great header, for example people’s name + title. Thanks! Juerg   8/13/2021 13:44  Justin, we have now added the new “expand” option (to be added to the web part’s “Options” setting): expand=all expands all the entries expand=top expands just the top entry We also added the new “grouptemplate” option (also to be added to the web part’s “Options” setting) as eg. expand=top|grouptemplate=Author:{Created By} : {Title} where you embed the column name(s) enclosed in curly braces Please re-download the web part and then update the solution. Anna   9/6/2021 12:24  Is it possible to change the colour of the selected tab? Juerg   9/6/2021 12:37  Anna, yes, please enter the below into the web part's "Group Headder CSS Style" setting: active:tab color value Example: active:red Heather   4/19/2022 16:16  Seem to be having a few issues with the AE Tabs Web Part - been using it a about a year but have recently been getting an "Attempted to use an object that has ceased to exist" error on pages where this web part is used. Is this a known issue or has anybody else experienced it. Any advice would be useful. Thanks Heather Rhonda   10/18/2022 17:55  Does grouptemplate work in the trial version? If so, are there any other "Options" or specific settings we need to use in order for it to work? We just downloaded the trial version last week. Juerg   10/19/2022 11:31  Rhoda, yes it works. You typically do not need to use any "Options" except in cases where you need to configure some seldom used feature. Rhonda   10/19/2022 23:46  My Sharepoint list contains a link that opens the list item in edit mode. When I use this same field in this web part using Tabs and Table with the field name specified {Last_name}, the field is not a link. How do I specify that the field is a link to this web part so that I can have that edit item capability? Juerg   10/20/2022 11:28  Rhonda, please append "/view" to the column to be linked to the item's detail view as eg. {Last_name/view} Rhonda   10/25/2022 23:23  Is there any way to line up the column headers and the columns using CSS in the webpart? Is there any way to use CSS in the webpart to modify the Header and Footer Text? Am I missing a link to documentation somewhere? I am asking a lot of questions that seem simple. Juerg   10/26/2022 16:18  Rhonda, you can directly embed HTML code and CSS styles both in the "Header Text" and the "Footer Text" settings as for example: <p style="color:red;font-weight:bold">This is the header</p> Regarding the column headers: if you are using the "Table" template type setting and have checked the "Show Table Headers" setting, the column headers should align with the columns properly. Jaison   10/26/2022 18:43  Is there a way to change the grouping icon from and arrow putting down to the + symbol of the old accordian webpart? Jaison   10/26/2022 19:24  Also, is there a way to make .AELIaccordian {float: left} instead of {float:right} Jaison   10/26/2022 19:25  Correction to below*** Also, is there a way to make .AELIaccordian::after {float: left} instead of {float:right} Juerg   10/27/2022 11:51  Jaison, we have now added the new "up" and "down" options (to be added to the web part's "Options" setting) which lets you specify the symbols used for the arrows. To display "+" and "-" symbols, please enter the corresponding "Font Awesome" unicode characters: up=067|down=068 To also display the arrows at the left (as opposed to at the right), please also add "arrows=2" as eg. up=067|down=068|arrows=2 Please re-download the web part and then update the solution. Jaison   10/27/2022 21:14  Thank you very much! Great help! Jaison   11/28/2022 19:16  Hello, I have the web part working perfectly with document libraries, but with a list, when you click on the item, it does not open the document associated with the list item directly. It just opens the list item with the link to the document as a property. Is there a setting to have a list item that has a document attached to open the file directly like the old Accordion web part? Thanks! Juerg   11/29/2022 12:27  Jaison, is the document to be opened defined as a list item attachment or as a property of type "Hyperlink or Picture" ? Jaison   11/29/2022 21:16  Juerg, they are SharePoint lists with a text field containing the URL to the document. Juerg   11/30/2022 14:43  Jaison, please rather use a field of type "Hyperlink or Picture" to define the document URL. This then also allows you to assign/display a friendly name (as opposed to the raw URL). Rhonda   12/15/2022 20:33  We have about 40K list items. The list is grouped by the Year as the tab. Loading of the page is very slow (1.5 minutes with the web part added to the page). If I restrict the number of items, I only get one or two years since there are approximately 6K per year. Is there anything I can do to speed up the loading process? Juerg   12/16/2022 16:52  Rhonda, are you also using the interactive search filter via the web part's "Search Filters" setting ? rhonda   1/23/2023 22:43  We are continuing to experience very slow response time on the grouped by year tab. We are using the interactive search filer via the web part's "Search Filters" setting, but I am referring to when the page initially loads prior to a user filtering any of the data. It is several minutes before the page loads the data. With the standard SP OOTB view, the same data load within seconds. Any ideas on what we can do to speed up the webpart? If not, we may have to move away from uisng this one. Micael   1/26/2023 15:24  Hi Juerg, I'm trying to set up tabs on a modern page that are based on a document library. The documents go up well according to the "view" and "group by" chosen. However, it is only raw text that appears. Is it possible to add the hyperlink for opening the document on the text? I tried this code but without success: {Title/url} With my best Regards, Micael Juerg   1/26/2023 18:29  Rhonda, since your list contains about 40,000 items, it responds very slowly when returning all 40,000 items. Would it be a good option to NOT return any items as long as your interactive search filter contains no filter criteria ? rhonda   1/26/2023 21:21  Hi Juerg, Unfortunately, returning NO records in not an option. Any other ideas? Rhonda Juerg   2/2/2023 13:04  Micael, we needed to fix an issue regarding “French” sites, so please re-download the Tabs & Accordion web part and then update the farm solution. Please then use the below “Configuration" template where you do not include the “/view” parameter: template={Nom} Juerg   2/2/2023 17:20  Rhonda, as long as you need to get all 40,000 list items when opening the page, it will load slow. Can’t you restrict the number of items to be shown when the user opens the page as eg. just displaying the search filter interface or using a suitable filter preset (as eg. just displaying this year’s list items etc.) ? Daniel   6/23/2023 14:26  I've seen above, it's possible to style background-color of active group header white CSS "active:tab color value". Is it also possible to style background-color of inactive tabs, similar to tabs in AE Webpart Tabs Webpart? Yaron Buskila   4/20/2025 14:28  Hi, I added a Date column to an item template, How can I format it? I am getting 00:00:00: 2024-01-31 Juerg   5/15/2025 11:46  Yaron, please add the below formatting to the “releaseDate” in the “Field Template” setting: <td>{releaseDate=d}</td>