Soundar Subramani Soundar Subramani - 10 months ago 46
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( === 'basicDay') {
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+'"/>');
$(".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()


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 Source

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


Change in js

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

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