KW Online Tools Zone
Knowledge Walls
View All Tools Home
ACCORDION_EXAMPLE
[Jquery editor]
Run
Share Link
Clear
HTML [Ctrl+Enter] - to run
<html lang="en"><head><meta charset="utf-8" /><title>jQuery UI Accordion - Default functionality</title><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script></head><body><div id="accordion" style="width:400px"><h3>Lion</h3><div><div class="content-compo"><div class="img-area"><img src="piegon.jpg" width="150" /></div><div class="text-area"><div class="content-title">Title</div><div class="text-area-content">Content</div></div></div></div><h3>Monkey</h3><div><div class="content-compo"><div class="img-area"><img src="piegon.jpg" width="150" /></div><div class="text-area"><div class="content-title">Title</div><div class="text-area-content">Content</div></div></div></div><h3>Piegon</h3><div><div class="content-compo"><div class="img-area"><img src="piegon.jpg" width="150" /></div><div class="text-area"><div class="content-title">Title</div><div class="text-area-content">Content</div></div></div></div></div></body></html>
CSS [Ctrl+Enter] - to run
.content-compo { display: block; width: 320px; } .img-area { width: 150px; float: left; } .text-area { width: 150px; float: right; } .text-area div { display: block; } .content-title { cursor: pointer; } .text-area div.text-area-content { display: none; }
Jquery [Ctrl+Enter] - to run
$(function () { $("#accordion").accordion(); $(".content-title").click(function () { $(this).next().toggle(); }); });
OUTPUT
Copyright © 2021 Knowledge walls, All rights reserved
Copyright © 2021 Knowledge walls, All rights reserved