KW Online Tools Zone
Knowledge Walls
View All Tools Home
CQWP2
[Jquery editor]
Run
Share Link
Clear
HTML [Ctrl+Enter] - to run
<div id="container"> <div class="change"><div class="click"><b>+</b></div><div class="me">Click me!!!</div></div> <div class="content">content contentcontentcontentcontent<br/>contentcontentcontentcontent</div> <div class="change"><div class="click"><b>+</b></div><div class="me">Click me!!!</div></div> <div class="content">content contentcontentcontentcontent<br/>contentcontentcontentcontent</div> <div class="change"><div class="click"><b>+</b></div><div class="me">Click me!!!</div></div> <div class="content">content contentcontentcontentcontent<br/>contentcontentcontentcontent</div> </div>
CSS [Ctrl+Enter] - to run
.change{ float:left; width:100%; display:block; margin:2px 0px; } .click{ background-color:black; padding: 0px 3px; border-radius:6px; width:10px; float:left; color:white; text-align:center; } .me{ display:inline; position:absolute; left:20px; float:left; margin: 0px 10px; } .content{ display:none; float:left; margin:10px 15px; } #container{ float:left; background-color:rgba(120,120,120,0.05); width:300px; border-radius:5px; }
Jquery [Ctrl+Enter] - to run
$(document).ready(function(){ $(".change").click(function(){ var x= $(this).find(".click").text(); if(x=="+") { $(this).find(".click").text('-'); $(this).next().slideDown(); } else { $(this).find(".click").text('+'); $(this).next().slideUp(); } }); });
OUTPUT
Copyright © 2021 Knowledge walls, All rights reserved
Copyright © 2021 Knowledge walls, All rights reserved