jQuery Slidetoggle - 仅在一个框上显示/隐藏子菜单

Question

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 1

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.

Answer 2

You are selecting every popup window. Try using :

$('.popout_list').slideUp(200);
$(this).closest('.doctor_wrapper').find('.popout_list').slideToggle(400);

Answer 3

You can use the following code to achieve this.

JS

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

Or try this link https://jsfiddle.net/wo1b58wj/7/

Answer 4

I used:

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

and it worked for me.

Side note: it's hard to click on those three dots because the box resize on mouse enter/leave