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

[Marco Rizzo]

Hi,

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:

 

ui-icon-triangle-1-s

ui-icon-triangle-1-e

 

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!

Regards,

M.

 

(*)

 

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 () {

doStartup();

});

 

 

(**)

[Sayali Patil]

Hello,

 

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);

alert(temp);

}

 

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.

 

Thx!