KW Online Tools Zone
Knowledge Walls
View All Tools Home
SLIDE_FUNC_WITH_IMG
[Jquery editor]
Run
Share Link
Clear
HTML [Ctrl+Enter] - to run
<div id="container"> <div class="header"> <div class="simg"> <img src="http://www.veryicon.com/icon/png/System/Crystal%20Clear%20Actions/Right%20Arrow.png" style="width:15px;height:15px;"/> <img src="http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png" style="width:15px;height:15px;"/> </div> <div class="cli">click</div> </div> <div class="con"> <div>content</div> </div> <div class="header"> <div class="simg"> <img src="http://www.veryicon.com/icon/png/System/Crystal%20Clear%20Actions/Right%20Arrow.png" style="width:15px;height:15px;"/> <img src="http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png" style="width:15px;height:15px;"/> </div> <div class="cli">click</div> </div> <div class="con"> <div>content</div> </div> </div>
CSS [Ctrl+Enter] - to run
#container{ background-color:ececec; width:400px; float:left; } .simg{ float:left; } .header{ cursor:pointer; width:400px; float:left; } .con{ display:none; } .cli{ float:left; margin:0px 0px 0px 5px; }
Jquery [Ctrl+Enter] - to run
$(document).ready(function(){ $( ".simg img:last-child" ).hide(); $(".header").click(function(){ if($(this).find(".simg img").attr("src").match("http://www.veryicon.com/icon/png/System/Crystal%20Clear%20Actions/Right%20Arrow.png")) { $(this).find(".simg img").attr("src","http://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png"); $(this).css("border","1px dotted black"); $(this).next().slideToggle(); } else{ $(this).find(".simg img").attr("src","http://www.veryicon.com/icon/png/System/Crystal%20Clear%20Actions/Right%20Arrow.png"); $(this).css("border","none"); $(this).next().slideToggle(); } }); });
OUTPUT
Copyright © 2021 Knowledge walls, All rights reserved
Copyright © 2021 Knowledge walls, All rights reserved