Difference between revisions of "AccordionControl"
Jump to navigation
Jump to search
| Line 20: | Line 20: | ||
<h3>Section 1</h3> | <h3>Section 1</h3> | ||
<div> | <div> | ||
<p> consectetur pulvinar tincidunt. Aliquam nec scelerisque velit. Aliquam at neque urna. Sed sed | <p> consectetur pulvinar tincidunt. Aliquam nec scelerisque velit. Aliquam at neque urna. Sed sed | ||
ut interdum auctor, ultricies ut mi.</p> | ut interdum auctor, ultricies ut mi.</p> | ||
</div> | </div> | ||
<h3>Section 2</h3> | <h3>Section 2</h3> | ||
<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 | |||
</p> | </p> | ||
</div> | </div> | ||
<h3>Section 3</h3> | <h3>Section 3</h3> | ||
<div> | <div> | ||
<p> | <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> | </p> | ||
</div> | </div> | ||
Latest revision as of 20:08, 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
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>