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

linq function fails on type conversion

linq

I have a linq query with a comparison of varchar to int

Can't connect to MySQL databse of any webhost from anywhere other than the webhost itself

mysql database web-services web-hosting

I have 2 different webhost (pagodabox &amp; 000webhost, both free) and I've set up a localhost with MySQL.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.