如果有更多具有相同类的div，则将JavaScript函数应用于1 div

Question

I'm trying to make a simple timeline that informs users. When they click on a date, there should be some sort of "accordion" system that drops down and give more information. When they click on it again, the "accordion" closes again.

I've included some pictures to make it somewhat more clear:

And:

The first image shows what the user is seeing when he gets onto the page, the second picture shows what he sees when he clicks on 1 of the elements.

The problem ive at the moment is when he clicks on 1 day, all the information is shown . I dont know how i can get some sort of index so only that particular day shows its hidden information.

At the moment I've the following code:

JavaScript

        $counter=1;
        $(document).ready(function(){
          $(".tijdlineElement").click(function(){

            $(".tijdlineElementHidden").slideToggle("slow");

            if($counter == 1){
            getElementsByClassName("tijdlineElementHidden").style.display = "block";
            $counter = 2
            }
            else{
         getElementByClass("tijdlineElementHidden").style.display = "none";

            $counter =1
            }
          });
        });

and the PHP to make 1 Day:

    echo "<div class='tijdlineElement'>";
echo "<div class='tijdlineP2Element' >" . $topic['Uur']."<br /><br />" . $topic['Beschrijving'] . "</div>";

echo "<div class='tijdlinePElement'>". $newDate . '<br />'. $newDate1 . ' '. $newDate1a . '<br />' . $newDate2 ."</div>";
echo "<img src='images/meerFase1.png'/>";


echo "</div>";
echo "<div class='tijdlineElementHidden' style='display:none;'>";
echo "<div class='tijdlineP2Element'>" . $topic['LangeBeschrijving'] . "</div>";
echo "<div class='tijdlinePElement'></div>";
echo "</div><br />";

The issue is, when a user clicks on 1 date, all the information from the other days get revealed aswell.

So my question is: How can i get access to that particular div, so only the information from the selected(the div that was clicked on) div is shown?

Answer 1

With your current code by using $(".tijdlineElement").click(function(){ } You are triggering the click event on all elements with that class. What you could do is use something like .each() and $(this) to scope it to your currently clicked element.

$(".tijdlineElement").each(function(){
   $(this).on({
       click:function()
       {
           $(this).slideToggle("slow");
           // other click function stuff
       }
   });
});

Quick Demo:

http://jsfiddle.net/9v2D5/

Updated Demo:

http://jsfiddle.net/9v2D5/25/

Answer 2

Try this:

var parent = $( this );
$( ".tijdlineElementHidden", parent ).slideToggle("slow");

It should toggle only the "tijdlineElementHidden" divs that are children to the clicked element.

Answer 3

Loop through all elements that share the same class name, then addEventListener or attachEvent if IE8. (Native JS solution)

var elements = document.querySelectorAll(".tijdlineElement");
var i = 0, length = elements.length;
for (i; i < length; i++) {
    if (document.addEventListener) {
        elements[i].addEventListener("click", function() {
            var element = this;
        });
    } else { // IE8 support
        elements[i].attachEvent("onclick", function() {
            var element = elements[i];
        });
    };
};

Answer 4

Instead of referencing the class, use $(this) to reference it:

 $(".tijdlineElement").click(function(){

   $(this).find(".tijdlineElementHidden").slideToggle("slow");
   .....the rest of the code...
 }