jQuery addClass to a div if another div has a class -
i looking ad class trigger div if panel div open. can;t quite crack it.
basically: open panel = "active" class added it's trigger
i threw fiddle make life easier: http://jsfiddle.net/markthelefty/nlzz4/
thanks!
jquery:
$(document).ready(function(){ // add initial action- first panel $(".trigger:first").bind("click",function(){ $(this).next().fadetoggle("slow", "linear"); }) $(".panel").each(function(){ $(this).addclass("close"); $(this).css("display","none"); }) $(".panel:first").removeclass("close"); $(".panel:first").addclass("open"); $(".panel:first").css("display","block"); var lastid=$(".trigger:last").attr("id"); $(".next").click(function(){ var parid=$(this).parent().attr("id"); var first=0; $(this).parent().prev().unbind("click"); $(this).parent().prev().bind("click",function(){ $(this).next().fadetoggle("slow", "linear"); }) var nextid=$(this).parent().next().attr("id"); if (nextid==lastid) { $(this).parent().next().unbind("click"); $(this).parent().next().bind("click",function(){ $(this).next().fadetoggle("slow", "linear"); }) } $(".close").each(function(){ var id=$(this).attr("id"); if(id>parid && first==0) { $(this).removeclass("close"); $(this).addclass("open"); first=1; $(this).fadein("slow"); } }) $(this).parent().removeclass("open"); $(this).parent().addclass("close"); $(this).parent().fadeout("slow"); }) })
html
<div id="trigger-1" class="trigger"> <h1>panel 1 trigger (entire black area)</h1> </div><!--/trgger-1--> <div id="panel-1" class="panel"> <p>or sit amet, consectetur adipiscing elit. proin venenatis faucibus quam, sit amet ornare risus dignissim vitae. praesent accumsan quam nec velit viverra vitae faucibus mi lacinia. donec @ leo eget massa lobortis gravida. phasellus eu ligula non sem scelerisque sodales sit amet sed metus. </p> <a href="#" class="next">next step ></a> </div><!--/panel-1--> <div id="trigger-2" class="trigger"> <h1>panel 2 trigger (entire black area)</h1> </div><!--/trgger-2--> <div id="panel-2" class="panel"> <p>or sit amet, consectetur adipiscing elit. proin venenatis faucibus quam, sit amet ornare risus dignissim vitae. praesent accumsan quam nec velit viverra vitae faucibus mi lacinia. donec @ leo eget massa lobortis gravida. phasellus eu ligula non sem scelerisque sodales sit amet sed metus. </p> <a href="#" class="next">next step ></a> </div><!--/panel-2--> <div id="trigger-3" class="trigger"> <h1>panel 3 trigger (entire black area)</h1> </div><!--/trgger-3--> <div id="panel-3" class="panel"> <p>or sit amet, consectetur adipiscing elit. proin venenatis faucibus quam, sit amet ornare risus dignissim vitae. praesent accumsan quam nec velit viverra vitae faucibus mi lacinia. donec @ leo eget massa lobortis gravida. phasellus eu ligula non sem scelerisque sodales sit amet sed metus. </p> <a href="#" class="submit">submit ></a> </div><!--/panel-3-->
try
$('div.panel').slideup(); $('div.trigger').on("click",function(){ if(!$(this).hasclass("open")) { $('div.panel').slideup(); $('div.trigger').removeclass("open"); $(this).next("div").slidedown(); $(this).addclass("open"); } else { $(this).next('div').slideup(); $('div.trigger').removeclass("open"); $('div.panel').slideup(); } });
here fiddle
Comments
Post a Comment