Jump to content
We've recently updated our Privacy Statement, available here. ×

How to change the icons in "Accordion Menu" Javascript - (Spotfire 7.11)

Marco Rizzo

Recommended Posts


I would like to change the icons in theAccordion Menu. Actually the JS usejQueryUI icons.

I use this javascript (*) to create Accordion Menu and I would like change the icons:





with icons that I insert into HTML as (embedded in analysis).

The HTML is (**)


How can modify the code for insert them


Thanks so much for the help and possible solutions!






doStartup = function () {


// Configure accordion

$("#" + jsAccord).accordion({

collapsible: true,

active: 0,

heightStyle: "content",

beforeActivate: function (event, ui) {

// The accordion believes a panel is being opened

if (ui.newHeader[0]) {

var currHeader = ui.newHeader;

var currContent = currHeader.next('.ui-accordion-content');

// The accordion believes a panel is being closed

} else {

var currHeader = ui.oldHeader;

var currContent = currHeader.next('.ui-accordion-content');


// Since we've changed the default behavior, this detects the actual status

var isPanelSelected = currHeader.attr('aria-selected') == 'true';

// Toggle the panel's header

currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString()));

// Toggle the panel's icon

currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);

// Toggle the panel's content

currContent.toggleClass('accordion-content-active', !isPanelSelected)

if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }

// Set current date type

toggleDateType($('#periodSelector select')[0].value);

return false; // Cancel the default action



// Change accordion colour

$("#accordion .ui-accordion-header").css("background", "#7a7a7a");

$("#accordion .ui-accordion-header").css("border-color", "#7a7a7a");

$("#accordion .ui-accordion-header").css("border-bottom-right-radius", "30px");

$("#accordion .ui-accordion-content").css("background", "transparent");



// Startup

$("document").ready(function () {






Link to comment
Share on other sites

  • 3 months later...



When you say I am assuming you are referring to the Text area image insert option which will insert a tag something like -


You can extract the src of this image and use it ,if that is what you are looking for using this js-

Add an id attribute to the image


var myimg=$("#img1").attr("src");

var ind=myimg.indexOf("&image");

if (ind > 0)


var temp = myimg.substring(ind+7,myimg.length);




Now the name of the image is available in temp and you can use it further in your code.


It would be great if you could share a sample dxp demonstrating this usecase so we could help out.



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...