Question

I have 3 elemets that are hidden from the beginning, there are also 3 links to show them with slideToggle. I’m looking for some solution to make my code simplier and to be more smart. I also have this problem, when a element is visible and I click on another link, I would like the visible link to toggle back before it toggle the new. As my code is now, it only toggles back when I click on the same link, but then the class that add bold font to indicate a selected link still gets bold. Hmmmm, could this be done in a better way? Precaite some help! Thanks!

$(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");
});

});

The HTML code for the jQuery:

<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");  
        }
    });
  });
});