CODEWITHSUNDEEP
javascriptjqueryhtmldjango
All Day
All Day

Reputation: 143

jQuery Having multiple on click events

I have a calendar up and running, i have a more.. button on each day if there are more events than 3. Once this button is clicked a drop-down appears and shows the other events in that day.

Its getting the correct data for each dropdown but if i click the button that triggers the on click they all open.

Jquery:

 <script>
 function deselect(e) {
 $('.pop').slideFadeToggle(function() {
   e.removeClass('selected');
 });
}

$(function() {
  $('[id^=contact]').on('click', function() {
   if($(this).hasClass('selected')) {
     deselect($(this));
       } else {
  $(this).addClass('selected');
    $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#contact'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing,     callback);


};
</script>

Html + Django

{% if forloop.counter|divisibleby:2 %}
    <a href="/contact" id="contact{{     forloop.counter }}" class="popup"><small>More...<small></a>
    <div class="messagepop pop">
{% endif %}

<p class="alert" style="background- color: #{{ occurrence.event.category.color }}">
    <a title="{{ occurrence }}" href="{% url "calendar_occurrence_detail" pk=occurrence.event.pk year=occurrence.start.year month=occurrence.start.month day=occurrence.start.day %}">{{ occurrence|truncatechars:22 }}</a>
</p>
{%if forloop.last%}
    </div>
{% endif %}

I'm not the best at JQuery so this might be simple for others but i cant seem to figure it out

Thanks in advance! JF

Edit - The hover div + data is created in a for loop

Upvotes: 0

Views: 68

Answers (1)

DavidDomain
DavidDomain

Reputation: 15293

You could use the .next() selector method in the click handler on the current clicked button
( $(this) ).

Just change

$('.pop').slideFadeToggle();

to

$(this).next().slideFadeToggle();

Upvotes: 1

Related Questions