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


I would like to change the icons in the Accordion Menu. Actually the JS use jQuery UI 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 <img src="........"> (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 ='.ui-accordion-content');

                // The accordion believes a panel is being closed

            } else {

                var currHeader = ui.oldHeader;

                var currContent ='.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 () {





<TABLE width="20%" height="100%" align=left border=0 cellSpacing=1 cellpadding=1>


<div id="accordion">

<h3 class="testi"><SpotfireControl id="92984d2dcd6f4d559900d2f2080dec7d" /></h3>


<SpotfireControl id="8e4519ca0e4549ada88ac0ca0c2f8ceb" />


<h3 class="testi"><SpotfireControl id="bcf775dc25da49979f82713402b4e85c" /></h3>


<SpotfireControl id="b7f708f4cf5242f38f42bc21e54c0065" />


<h3 class="testi"><SpotfireControl id="89a724546869432aa34186c00795e6c2" /></h3>


<SpotfireControl id="36ec07a923184ab79ec3d1abed061872" />






(1) Answer