open a div by clicking over an image in whole page

Question

I want to have a hamburger icon in my page and by clicking over it, it opens a div right below it. These hamburger icons are multiple in my page.

As you see below my code, I want to open the class="pop" below the hamburger icons as I click on them.

 $(document).ready(function() { $("#openDrop").click(function() { //to be implemented }); }); 

 .pop { background-color: #555; color: #999; height: 125px; width: 80px; visibility: hidden; text-align:center; } 

 <div class="pop"> <br/> <div>Mark <br/> <br/>ReshaD <br/> <br/>Thomas <br/> </div> <br/> </div> <img id="openDrop1" src="http://s24.postimg.org/yalcvye1t/hamburger.png" style="position: relative; left: 170px; top:-70px; cursor: pointer;"> <img id="openDrop2" src="http://s24.postimg.org/yalcvye1t/hamburger.png" style="position: relative; left: 300px; top:-70px; cursor: pointer;"> 

Is there any solution in order to do so? thanks in advance.

Working jsFiddle

Answer 1

Fixed up your fiddle..

https://jsfiddle.net/07nfsx07/9/

bascially you can perfect it yourself but heres the general gist of what you want.

$(document).ready(function(){
    $(".openDrops").click(function(){
       x = $(this).offset().top + 20 + 'px';
       y =$(this).offset().left + 20 + 'px';
       $('.pop').css('top', x).css('left', y).show();
    });
});

Also changed your CSS a little:

  display:none;
  position: absolute;

and your HTML

<img id="openDrop1" class="openDrops" src="http://s24.postimg.org/yalcvye1t/hamburger.png" style="position: relative; left: 170px; cursor: pointer;">

<img id="openDrop2" class="openDrops" src="http://s24.postimg.org/yalcvye1t/hamburger.png" style="position: relative; left: 300px; cursor: pointer;">