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

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

android - send complex objects as post php java -

charts - What graph/dashboard product is facebook using in Dashboard: PUE & WUE -