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

Hi,

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!

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

});


 

(**)


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

<div id="accordion">
<h3 class="testi"><SpotfireControl id="92984d2dcd6f4d559900d2f2080dec7d" /></h3>
<div>
<SpotfireControl id="8e4519ca0e4549ada88ac0ca0c2f8ceb" />
</div>

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

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

</TBODY>
</TABLE>


 

(1) Answer

Login