如何显示元素并在单击另一个元素时隐藏

Question

I have a series of div elements which i trigger with the code below.

$(".course_id").on("click", function(){
     var id = $(this).data("id");
     $("div#lessons_by_course_" + id).removeClass("hidden");
});

The divs have an id called lessons_by_course + id eg

<div id="lessons_by_course1"></div>

the id number is parsed dynamically using ruby on rails .each loop.

what i want is when i click on a div i want it to show and when i click on another div,i want jquery to hide the last one that was shown and show the one i clicked next.

Note that .course_id is a class for many elements so,each time i click on a certain one, a different div pops up because the id is different each time.

Answer 1

You could cache the id of the last shown element in a global variable:

var id;

Then in your loop:

$(".course_id").on("click", function(){
    if(id) {
        $("div#lessons_by_course_" + id).addClass("hidden");
    }
    id = $(this).id;
    $(this).removeClass("hidden");
});