Sanjeev K Sanjeev K - 2 months ago 8
CSS Question

jQuery Slidetoggle - show/hide sub menu on one box only

I have created a page where I have showing multiple boxes, and each box have three vertical dots on top right corner, when you click on those three dots it will open sub menu, for which I have used

slidetoggle
and what I wanted is when user click on the dots from one box it should show at once place only but right now its showing on all boxes, the
jQuery
I have written is not working as expected.

Here is the JSfiddle demo

For slide toggle I have the following JQuery:

$('.popout_info > a').click(function () {
$(".popout_info").next().slideToggle(200);
});


Can anyone please suggest how to handle this, if I assign ID to each
DIV
then in this case the boxes are going to be in unlimited numbers, may be something which can be handled dynamically?

Thanks in advance!

Answer

You have to change your jQuery function to achieve that as:

jQuery

$('.popout_info > a').click(function() {
  $('.popout_list').slideUp(200);
  var nextPopup = $(this).parent(".popout_info").siblings('.popout_list');
  if (!($(nextPopup).is(':visible'))) {
    $(nextPopup).slideToggle(200);
  }
});

Here's your updated JSFiddle

I have made some amendments to hide any other open popup if one popup opens to disallow redundancy.

Comments