Soundar Subramani Soundar Subramani - 2 months ago 13
Javascript Question

Jquery fires all element on click when I fire using the class name

I am trying to customize my basicDay view in fullcalendar like if I click on the event it will slide down a div tag with some content.
Here is my code.

eventRender: function(event, element, view,calEvent) {
if(view.name === 'basicDay') {
proj=event.title;
element.empty();
element.append('<div id="flip" class="flip1" onclick="slide()">'+proj+'</div>');
element.append('<div class="down" id="panel">\n\
Project Name: <input type="text" value="'+proj+'"/>\n\
Date: <input type="date" value="'+dt+'"/>');
element.append('</div>');
$(".fc-today").css("background", "white");

}
},


Here I am clearing task elements and add a custom div tag with the project name. If I have more than one event the Div tag will add dynamically.

The thing is, I need to slide down div with the class="flip1" and show the div with the class="down".

This is how I tried to do it.

function slide()
{
$('.down').slideToggle("fast");

}


The problem is if I have more than one event all the div tag is sliding down. But want to slide down the tag which I will click.Sorry for my bad English, please help me resolve this guys. Thanks in advance.

Answer

You are trying to open #panel on clicking the the #flip You can pass the context using this and then select the next immediate #panel

In dynamically created element

onclick="slide(this)"

Change in js

function slide(elem){  
   var getNextPanel = $(elem).next("#panel");
   getNextPanel.slideToggle("fast");
  }

Not tested but you can try this. Also note id like panel & flip cannot be same for all the dynamically created element, id need to be unique