Sanjeev K Sanjeev K - 1 month ago 4x
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

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
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 () {

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

Thanks in advance!


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


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

Here's your updated JSFiddle

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