CODEWITHSUNDEEP
javascriptphpjquery
Gertjan Vanhove
Gertjan Vanhove

Reputation: 19

Apply a javaScript function to 1 div when there are more divs with the same class

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?

Upvotes: 1

Views: 109

Answers (4)

khollenbeck
khollenbeck

Reputation: 16157

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/

Upvotes: 1

narigone
narigone

Reputation: 1

Try this:

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

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

Upvotes: 0

Nawed Khan
Nawed Khan

Reputation: 4401

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

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

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

Upvotes: 0

ndugger
ndugger

Reputation: 7531

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

Upvotes: 0

Related Questions