Jquery toggle not working / 2 classes (multiple class selector?)

Problem

My code is here: http://jsfiddle.net/GwUmb/4/

    $(document).ready(function(){
    $(".trigger,.trigger-2").click(function(){
        $(".panel,.panel-2").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
});

I've been struggling to load panel-2 from trigger-2...I notice that .trigger and .panel behave (somewhat) as expected (I notice some css-style weirdness).

If I remove the .panel-2 and the .trigger-2 the code behaves perfectly...but otherwise it doesn't.

I was trying to replicate what I read here: http://www.w3schools.com/jquery/sel_multiple_classes.asp .

Problem courtesy of: user14696

Solution

Another option for you is to use a single class name for your links/containers. I have cleaned up your code a little bit and provided a hover function to display your links. It should be a good starting point for you. A CSS approach using lists may be an even easier approach...

working example is here http://jsfiddle.net/GwUmb/11/

updated jQuery:

$(document).ready(function() {

                //global var to hold the current selected link
                var $link;

                $('.trigger').hover(function() {
                    $link = $(this);
                    //get position of clicked link
                    var linkPos = $link.position();
                    //position & display this links panel
                    $link.toggleClass("active");
                    $link.siblings('.panel').css({
                        'top' : linkPos.top
                    }).fadeIn(600);

                }, function() {//hide the panel on mouseout
                    $link.siblings('.panel').slideUp(600);
                    $link.removeClass('active');
                });

            });
            // end ready
Solution courtesy of: lukeocom

Discussion

The issue here is that no matter which trigger you click, both (or all) panels will be activated because you are selecting them both and calling .toggle on them. There are many ways to solve this such as storing the corresponding index of the panel on the trigger as data, or using the index. The latter may work well for you.

$(".trigger").click(function(e) {
    $(".panel").eq($(this).index(".trigger")).toggle("fast");
    $(this).toggleClass("active");
    e.preventDefault();
});

http://jsfiddle.net/GwUmb/6/

Discussion courtesy of: Explosion Pills

This recipe can be found in it's original form on Stack Over Flow.