mootools 点击滑动伸展

-->

first section

I'm the content for the first section.

second section

I'm the content for the second section.

third section

I'm the content for the third section.

<script src="http://www.clientcide.com/scripts/clientside.moo.v1.2.packed.js"></script> -->

<DL id=AccordionMulti class=AccordionMulti>
    <DL>
        <DT class=stretchtoggle>
        <B>first section</B>
        <DD style="FILTER: ; PADDING-BOTTOM: 0px; MARGIN-TOP: 0px; DISPLAY: none; MARGIN-BOTTOM: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; VISIBILITY: visible; OVERFLOW: visible; PADDING-TOP: 0px; opacity: 1; totalHeight: 18; computedTop: 0; computedBottom: 0" class=stretcher>
            I'm the content for the first section. 
        </DD>
        <DT class=stretchtoggle>
            <B>second section</B>
        </DT>
        <DD style="POSITION: static; FILTER: ; PADDING-BOTTOM: 0px; MARGIN-TOP: 0px; ZOOM: 1; DISPLAY: none; MARGIN-BOTTOM: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; VISIBILITY: visible; OVERFLOW: visible; PADDING-TOP: 0px; opacity: 1; totalHeight: 18; computedTop: 0; computedBottom: 0" class=stretcher>
            I'm the content for the second section. 
        </DD>
        <DT class=stretchtoggle>
            <B>third section</B>
        </DT>
        <DD style="POSITION: static; FILTER: ; PADDING-BOTTOM: 0px; MARGIN-TOP: 0px; ZOOM: 1; DISPLAY: none; MARGIN-BOTTOM: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; VISIBILITY: visible; OVERFLOW: visible; PADDING-TOP: 0px; opacity: 1; totalHeight: 18; computedTop: 0; computedBottom: 0" class=stretcher>
            I'm the content for the third section. 
        </DD>
    </DL>
</DL>
<script defer=defer>
new MultipleOpenAccordion($('AccordionMulti'), {
    elements: $$('#AccordionMulti dd.stretcher'),
    togglers: $$('#AccordionMulti dt.stretchtoggle'),
    openAll: false
});


</script>
<link href="http://www.clientcide.com/css/clientside.css" rel="stylesheet" type="text/css"/>