开发者

how to make spry accordion look like a tree

开发者 https://www.devze.com 2023-03-10 18:31 出处:网络
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

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="showEnvir开发者_StackOverflow社区onmentVariableSpan();">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>


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.


use css background image propeties and apply it to proper css class when its open and closed.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号