How to show div and css content when clicking on a image area map

Question

I have this issue, where i am trying to show the css/div in the area coordinate position of where I have clicked. Essentially i would like to show that div on the position of the area assigned. Mostly like a click and show information based on the area click

 (function($) { $('.list-group area').on('click', function(e) { $('.' + this.id).toggleClass('show'); }); })(jQuery); 

 .dropdowntest-content { position: absolute; display: none; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 12px 16px; z-index: 10; top: 0; left: 0; } .show { display: block; } area { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <map class="list-group" name="map"> <area id="section-1" class="list-group-item" shape="rect" coords="0,0,200,200" /> <area id="section-2" class="list-group-item" shape="rect" coords="242,194,393,288" /> <area id="section-2" class="list-group-item" shape="rect" coords="397,24,530,109" /> </map> <img alt="Picture1" src="https://placehold.it/680x466" height="466" width="680" usemap="#map" data-cms="{'contentId':95875}" /> <div class="dropdowntest-content section-1"> <p>Hello world 1</p> </div> <div class="dropdowntest-content section-2"> <p>Hello world 2</p> </div> <div class="dropdowntest-content section-3"> <p>Hello world 3</p> </div> 

Answer 1

This shows the dropdowntest-content on the cursor position:

 (function($) { $('.list-group area').on('click', function(e) { $('.' + this.id).toggleClass('show').css({top: e.clientY, left: e.clientX }); }); })(jQuery); 

 .dropdowntest-content { position: absolute; display: none; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 12px 16px; z-index: 10; top: 0; left: 0; } .show { display: block; } area { cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <map class="list-group" name="map"> <area id="section-1" class="list-group-item" shape="rect" coords="0,0,200,200" /> <area id="section-2" class="list-group-item" shape="rect" coords="242,194,393,288" /> <area id="section-2" class="list-group-item" shape="rect" coords="397,24,530,109" /> </map> <img alt="Picture1" src="https://placehold.it/680x466" height="466" width="680" usemap="#map" data-cms="{'contentId':95875}" /> <div class="dropdowntest-content section-1"> <p>Hello world 1</p> </div> <div class="dropdowntest-content section-2"> <p>Hello world 2</p> </div> <div class="dropdowntest-content section-3"> <p>Hello world 3</p> </div>