Difference between revisions of "AccordionControl"

From rbachwiki
Jump to navigation Jump to search
Line 16: Line 16:


<body>
<body>
    <h1>Using the Accordion Control</h1>
    <p>The Accordion control is great for displaying groups of information that the user can reveal and hide individually. </p>
     <div id="accordionCtrl">
     <div id="accordionCtrl">
         <h3>Section 1</h3>
         <h3>Section 1</h3>
         <div>
         <div>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet ullamcorper nisi. Integer vel tincidunt tortor. Phasellus quis tempor est, ut ultrices tellus. Vestibulum malesuada lacus nec felis rutrum, eget sagittis sem dapibus. Curabitur
             <p> consectetur pulvinar tincidunt. Aliquam nec scelerisque velit. Aliquam at neque urna. Sed sed vulputate mauris, in vulputate orci. Sed egestas augue rutrum augue ullamcorper, convallis facilisis arcu convallis. In lorem risus, posuere
                consectetur pulvinar tincidunt. Aliquam nec scelerisque velit. Aliquam at neque urna. Sed sed vulputate mauris, in vulputate orci. Sed egestas augue rutrum augue ullamcorper, convallis facilisis arcu convallis. In lorem risus, posuere
                 ut interdum auctor, ultricies ut mi.</p>
                 ut interdum auctor, ultricies ut mi.</p>
         </div>
         </div>
Line 28: Line 26:
         <div>
         <div>
             <p>Curabitur magna magna, ultrices feugiat elit non, posuere sagittis orci. Cras finibus enim eu rutrum elementum. Aliquam sapien leo, hendrerit sit amet est molestie, semper rutrum nulla. Aenean lacinia lacus quis tortor posuere eleifend. Phasellus
             <p>Curabitur magna magna, ultrices feugiat elit non, posuere sagittis orci. Cras finibus enim eu rutrum elementum. Aliquam sapien leo, hendrerit sit amet est molestie, semper rutrum nulla. Aenean lacinia lacus quis tortor posuere eleifend. Phasellus
                egestas ultricies lorem sit amet porta. Sed vestibulum dolor eget risus viverra, ut laoreet elit tempus. Sed sit amet turpis at risus euismod hendrerit a id ante. Etiam eget scelerisque diam, vitae viverra enim. Nam varius, quam viverra
  </p>
                malesuada sagittis, arcu odio sodales metus, id imperdiet massa urna id mauris. Phasellus posuere vestibulum sapien, ut pellentesque lorem fringilla id. Ut a lorem laoreet, tristique arcu porta, vulputate tortor. Vivamus vehicula dapibus
                varius. Vestibulum at ultrices felis, a ultricies lectus. Nam ac suscipit diam. Pellentesque vel mauris ullamcorper, ullamcorper ex sit amet, egestas justo. Phasellus risus dui, suscipit pellentesque arcu consectetur, auctor blandit arcu.</p>
         </div>
         </div>
         <h3>Section 3</h3>
         <h3>Section 3</h3>
         <div>
         <div>
             <p>Aenean consequat sollicitudin odio, a vestibulum sapien tempus et. Aliquam velit magna, imperdiet et gravida ac, rhoncus eget ex. Vivamus egestas sapien maximus aliquet malesuada. Fusce sed mattis orci. Praesent tincidunt dui sed eros mattis
             <p>
                rutrum. Donec ac sagittis metus, vel feugiat risus. Cras maximus nec massa quis faucibus. Nullam purus nisl, malesuada vitae eleifend volutpat, dapibus in sem. Vivamus sagittis varius lorem ut gravida. Phasellus sed nulla vel ipsum iaculis
                 dignissim. Quisque sit amet auctor nulla. Sed tempus mauris id magna porttitor egestas. In nisl risus, interdum vitae ligula non, sodales faucibus metus.
                 dignissim. Quisque sit amet auctor nulla. Sed tempus mauris id magna porttitor egestas. In nisl risus, interdum vitae ligula non, sodales faucibus metus.
             </p>
             </p>
Line 41: Line 36:
         <h3>Section 4</h3>
         <h3>Section 4</h3>
         <div>
         <div>
             <p>Sed tincidunt ut dui at consectetur. Ut dapibus metus dolor, et pulvinar tellus sodales ac. Duis vitae posuere tortor. Cras sapien diam, vestibulum at velit in, sagittis molestie arcu. Cras aliquam rutrum purus, in consectetur augue tincidunt
             <p>
                et. Phasellus dictum risus quis massa maximus, sit amet finibus lacus aliquam. In turpis tortor, luctus id volutpat ac, ultricies quis sem. Suspendisse dignissim egestas ullamcorper. Integer aliquet, tortor sit amet vestibulum suscipit,
                 augue enim rutrum diam, tincidunt pellentesque nisi augue sed dui. Cras vitae dui in tellus cursus interdum.
                 augue enim rutrum diam, tincidunt pellentesque nisi augue sed dui. Cras vitae dui in tellus cursus interdum.
             </p>
             </p>

Revision as of 20:07, 6 January 2017

Code 

 <script type="text/javascript">
        $("document").ready(function() {
            $("#accordionCtrl").accordion({
                icons: {
                    header: "ui-icon-circle-triangle-e",
                    activeHeader: "ui-icon-circle-triangle-s"
                },
                collapsible: true,
                event: "click mouseover"
            });
        });
    </script>
</head>

<body>
 
    <div id="accordionCtrl">
        <h3>Section 1</h3>
        <div>
            <p>  consectetur pulvinar tincidunt. Aliquam nec scelerisque velit. Aliquam at neque urna. Sed sed vulputate mauris, in vulputate orci. Sed egestas augue rutrum augue ullamcorper, convallis facilisis arcu convallis. In lorem risus, posuere
                ut interdum auctor, ultricies ut mi.</p>
        </div>
        <h3>Section 2</h3>
        <div>
            <p>Curabitur magna magna, ultrices feugiat elit non, posuere sagittis orci. Cras finibus enim eu rutrum elementum. Aliquam sapien leo, hendrerit sit amet est molestie, semper rutrum nulla. Aenean lacinia lacus quis tortor posuere eleifend. Phasellus
  </p>
        </div>
        <h3>Section 3</h3>
        <div>
            <p>
                dignissim. Quisque sit amet auctor nulla. Sed tempus mauris id magna porttitor egestas. In nisl risus, interdum vitae ligula non, sodales faucibus metus.
            </p>
        </div>
        <h3>Section 4</h3>
        <div>
            <p>
                augue enim rutrum diam, tincidunt pellentesque nisi augue sed dui. Cras vitae dui in tellus cursus interdum.
            </p>
        </div>
    </div>
</body>

Widgets

Retrieved from "https://www.r512.com/index.php?title=AccordionControl&oldid=734"