JS div Popup issue

Question

У меня есть некоторые div, которые появляются при нажатии ссылки, но я пытаюсь сделать так, чтобы при нажатии на вторую ссылку на всплывающее окно любые открытые будут закрыты до открытия нового. там должно быть только одно открытое за раз.

в Js ...

<script> 
    $.fn.slideFadeToggle = function (easing, callback) { 
    return this.animate({ 
     opacity: 'toggle', 
     width: 'toggle' 
    }, "fast", easing, callback); 
}; 

$(function() { 
    function select($link) { 
     $link.addClass('selected'); 
     $($link.attr('href')).slideFadeToggle(function() {}); 
    } 

    function deselect($link) { 
     $($link.attr('href')).slideFadeToggle(function() { 
      $link.removeClass('selected'); 
     }); 
    } 

    $('.contact').click(function() { 
     var $link = $(this); 
     if ($link.hasClass('selected')) { 
      deselect($link); 
     } else { 
      select($link); 
     } 
     return false; 
    }); 

    $('.close').live('click', function() { 
     deselect(); 
     return false; 
    }); 
}); 

          </script> 

дивы ...

<div id='did_{$page_trackid}' class='arrow_box pop_{$page_trackid}' style=''> <img src='".$info4['Image']."' class='subtext_img'> 
                <h2 class='subtext'><a href='http://www.xxxxxxx.co.uk/dnb/".$info2['username']."'>".$info2['username']."</a></h2> 
                <p class='subtext'>".$info3['user_title']."</p> 
                <p class='subtext'><a href='".$info3['website_link']."' target='_blank'>".$info3['website_link']."</a> 

                </p> 

                </div> 

       <div id='did_2_{$page_trackid}' class='arrow_box2 pop_stats_{$page_trackid}' style=''> 
                <h2 class='subtext'>Stats</h2><br /> 
                <p class='subtext'>Plays: 1m <br /> 
                    Downloads: 527, 046 

                </p> 

                </div> 

ссылки ...

<div style='position: absolute; z-index: 2; padding-top: 30px; padding-left: 699px;'> 

       <a href='#did_{$page_trackid}' class='contact' ><img style='height: 20px;' alt='Posted by' src='http://www.xxxxxxxxxx.co.uk/play1/skin/user-profile2.png' style=''></a> 
       </div> 

       <div style='position: absolute; z-index: 1; width: 20px; height: 20px; padding-top: 50px; padding-left: 699px;'> 
       <a href='#did_2_{$page_trackid}' class='contact'><img style='height: 20px;' alt='Track stats' src='http://www.xxxxxxxx.co.uk/play1/skin/stats.png' style=''></a> 
       </div> 

Я попытался заменить первую функцию с

function select($link) { 
$link.addClass('selected'); 
$('.arrow_box:visible').slideFadeToggle(function() {}); 
$($link.attr('href')).slideFadeToggle(function() {}); 

}

но это ошибки, с одним прикосновением по притирки другого. У меня есть 2 класса для divs (1 для каждого), поэтому я попытался добавить

$ ('. Arrow_box2: visible'). SlideFadeToggle (function() {});

но это тоже не работает.

У меня есть правильный способ закрыть любую открытую стрелку_сообщения или стрелка_box2 при нажатии ссылки, чтобы открыть новое всплывающее окно?

благодаря

Answer 1

Я скопировал свой HTML и JS в jsfiddle и модифицированный метод select. Попробуйте здесь:

http://jsfiddle.net/mchail/wHyfK/1/

Я считаю, что это сейчас делает то, что вы просили. Ключ состоит в том, чтобы переключать все отображаемые панели (чтобы скрыть их) перед переключением новой «выбранной» панели (чтобы показать ее).

Надеюсь, это поможет.