What is an Accordion?
A Spotfire Accordion is a vertically stacked list of items, which is often used in a menu or navigational bar. An accordion contains multiple items which can be expanded and collapsed to show or hide the subitems. As you can imagine, the term accordion originates from the musical instrument “accordion” which allows a musician to expand the bellows of the instrument.
When do you use a Spotfire Accordion
An Accordion is most often used group or categorise a list of items in a more convenient way for the user or to reduce the information overload for users/readers. But the accordion is also used as a way to create shortcuts or to fit more information on one screen by hiding parts of it in an accordion.
The Accordion in Spotfire
Spotfire uses the Accordion within the filtering panel to show or hide filters from a certain data table. However, Spotfire does not have a native way of creating your own Accordion in a text area. Nevertheless, it is possible to create a accordion using the HTML and Javascript functionalities of the text area.
How to make a Spotfire Accordion in 3 simple steps
Creating an Accordion in Spotfire takes 3 simple steps:
Step 1: add a text area
The first step in creating an Accordion is adding a text area, as Spotfire limits the use of JavaScript and HTML to text areas.
Step 2: inserting JavaScript code
After adding a text area you can richtclick the text area and select the HTML editor. Click on insert JavaScript code. you will get a pop-up window where you can enter the following code and give the script a name:
$( “#accordion” ).accordion({
heightStyle: ‘content’}
);
after adding this script you will see a Spotfire controller on the right side of the HTML editor.
Step 3: adding the Accordion
In this step we will use an example for a region selection. You can copy and past the below HTML code in order to create the accordion.
<div id="accordion" >
<h3>Europe</h3> <div> <HR>This is an example of an accordion used in a region selection or region navigation area <HR>The Netherlands <HR>Germany <HR>United Kingdom </div>
<h3>North-America</h3> <div> <HR>This is an example of an accordion used in a region selection or region navigation area <HR>USA <HR>Canada <HR>Aruba </div>
<h3>Asia</h3> <div> <HR>This is an example of an accordion used in a region selection or region navigation area <HR>Japan <HR>China <HR>India </div> </div>
This Accordion will have three items: Europe, North-America, and Asia. Each of these three items has 3 subitems and is divided by a line. below are two images of the final result.
(Header image: Photo by Christof Stache/AFP/Getty)
Attention: Spotfire X and higher
As of Spotfire X, TIBCO has “deprecated” (between quotes, as this has never officially been supported) the jQueryUI Javascript library (as e.g. mentioned in these release notes).
However, they have published this community page that documents what to do instead. Here you will find a complete DXP with all the scripts in it you need to create your own accordion.
More about our TIBCO Spotfire Knowledge
Want to learn more about Spotfire through our client use cases, handy how-to articles and blog-posts? Click the button below to discover our knowledge.
