Home/ Questions/Q 5987195
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T22:46:47+00:00

Here is my accordion how can i apply some stylesheet to this, so that

  • 0

Here is my accordion how can i apply some stylesheet to this, so that looks like a tree.

eg: + when accordion tab is closed and - when accordion is open

<div class="Accordion" id="systemAccordion" tabindex="1">
                <div class="AccordionPanel">
                    <div class="AccordionPanelTab">&nbsp;&nbsp;&nbsp;&nbsp;<a onClick="showSystemSpan();">System</a></div>
                    <div class="AccordionPanelContent">
                        <a onClick="showPatchesSpan();">Patches</a><br/>
                        <a onClick="showNetworkSpan();">Network</a><br/>
                    </div>
                </div>
                <div class="AccordionPanel">
                    <div class="AccordionPanelTab" >&nbsp;&nbsp;&nbsp;&nbsp;<a onClick="showNone();">User Environment</a></div>
                    <div class="AccordionPanelContent">
                        <a onClick="showEnvironmentVariableSpan();">Environment Variables</a><br/>
                    </div>
                </div>
                <div class="AccordionPanel">
                    <div class="AccordionPanelTab">&nbsp;&nbsp;&nbsp;&nbsp;<a onClick="showSystemSpan();">{mainData::@product}</a></div>
                    <div class="AccordionPanelContent">
                        <a onClick="showOdbcSpan();">ODBC</a><br/>
                        <a onClick="showBitmodeSpan();">Bitmode</a><br/>
                    </div>
                </div>
                <script type="text/javascript">
                    var sysAcc = new Spry.Widget.Accordion("systemAccordion",  {defaultPanel: -1, useFixedPanelHeights: false });
                </script>
            </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you look in the SpryAccordion.css stylesheet you will find

    .AccordionPanelTab {}

.AccordionPanelOpen .AccordionPanelTab {}

    You can set whatever background image you like on those two to get the effect you are after .AccordionPanelTab will affect the normal state and .AccordionPanelOpen .AccordionPanelTab will affect the open state. There are also comments in the stylesheet telling you what the different classes do.

    • 0