I want to style my accordion in a way that it resembles a tree structure. How can I achieve this using CSS?
For example: + should be displayed when the accordion tab is closed, and - when the accordion is open.
<div class="Accordion" id="systemAccordion" tabindex="1">
<div class="AccordionPanel">
<div class="AccordionPanelTab"> <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" > <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"> <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>