SlideToggle戻るとremoveClass？

Question

私は最初から隠されている3つのelemetsを持っています、また、slideToggleでそれらを示す3つのリンクがあります。私はコードをよりシンプルにし、よりスマートにするための解決策を探しています。私はまた、この問題を抱えています。要素が見えて、別のリンクをクリックすると、新しいリンクを切り替える前に表示リンクを元に戻したいと思います。私のコードは今では同じリンクをクリックするだけで元の状態に戻りますが、選択されたリンクを示す太字のフォントを追加したクラスはまだ太字になります。うーん、これはもっと良いやり方でできますか？ Precaiteいくつかの助け！ありがとう！

$(document).ready(function(){ 

$("#info").click(function() { 
$("#aktuellt").removeClass("startsida_extra_selected"); 
$("#kontakt").removeClass("startsida_extra_selected"); 
$("#info").addClass("startsida_extra_selected"); 
$("#startbild_info").slideToggle("fast"); 
}); 

$("#aktuellt").click(function() { 
$("#info").removeClass("startsida_extra_selected"); 
$("#kontakt").removeClass("startsida_extra_selected"); 
$("#aktuellt").addClass("startsida_extra_selected"); 
$("#startbild_aktuellt").slideToggle("fast"); 
}); 

$("#kontakt").click(function() { 
$("#info").removeClass("startsida_extra_selected"); 
$("#aktuellt").removeClass("startsida_extra_selected"); 
$("#kontakt").addClass("startsida_extra_selected"); 
$("#startbild_kontakt").slideToggle("fast"); 
}); 

}）;

jQueryのためのHTMLコード：

<div id="startbild_info"> 
<p>info</p> 
</div> 

<div id="startbild_aktuellt"> 
<p>aktuellt</p> 
</div> 

<div id="startbild_kontakt"> 
<p>kontakt</p> 
</div> 

Answer 1

$(document).ready(function(){ 

    var elements = $("#info, #aktuellt, #kontakt"); 

    elements.click(function(event) { 
    event.preventDefault(); 

    var element = $(this);  
    var element_id = element.attr("id"); 
    var bild_element = $("#startbild_"+element_id); 

    elements.removeClass("startsida_extra_selected");   

    bild_element.slideToggle("fast", function(){ 
     // After the toggle is finished, check if bild_element has opened or closed 
     // If bild_element has opened the class is added to element. 
     if(bild_element.is(":visible") === true) 
     {    
      element.addClass("startsida_extra_selected"); 
     } 
    }); 
    }); 
});