jQuery addClass to a div if another div has a class

I am looking to ad a class to the trigger div ONLY IF the panel div is open. Can;t quite crack it.

Basically: open panel = "active" class added to it's trigger

I threw this fiddle together to 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 One 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 at 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 Two 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 at 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 Three 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 at 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-->

Answers


Try something like this

$('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 is the fiddle


Not able to get your code but this might help you moving forward:

// If panel div has class open
if ($(".panel").hasClass("open")) {

    // Then add class close to trigger div
    $(".trigger").addClass("close");
}

Need Your Help

Difference between GAS, GWT, and Google app engine

google-app-engine gwt google-apps-script

I am new to app script so I found the documentation a bit confusing. I see there is a way to develop google apps in eclipse using a GWT plugin. But when I dig deeper I find out this method needs me...

How to implement hierarchical model in Sencha Touch

javascript model sencha-touch

I have read many questions/answers and tutorials and I still fail to implement hierarchical model in Sencha Touch. The root model is Tag. Each Tag has many Items. Here is my model: