How to show a div relative to the position of a button on click of that button in jQuery

Question

Here is my code:

$j(".btn-cart").on("click", function( e ){
            e.preventDefault();
            var top = $(this).offset().top;
            alert(top);
            $j("#content").animate({ 
            top: top
            }, 600);

        }

HTML:

for the div that is to be shown:

 <div id="angularJsApp" title="Basket" ng-app="cart" ng-controller="CartFormController">
        <div id="content" class="draggable" style="display:none;" ng-show="invoice.items.length > 0">
              <input type="checkbox" name="check" id="check"/>
              <label for="check">
              <div id="heads" >
                 <span id="commentBubble">
                   <a href=""><apex:image value="{!URLFOR($Resource.CartStyleBundle,'Shopping-Cart-Button.png')}" alt="" /></a>
                 </span>
              </div>

              <article class="pane" id="user_1">

                <table class="table table-checkout">
                    <tr>

                        <th>Description</th>
                        <th>Qty</th>
                        <th>Cost</th>
                        <th>Total</th>
                        <th></th>
                    </tr>
                    <tr ng-repeat="item in invoice.items">
                        <td>{{item.description}}</td>           
                        <td>{{item.qty}}</td>
                        <td>{{item.cost}}</td>
                        <td>{{item.qty * item.cost | currency : "£" }}</td>
                        <td>
                            [<a href="" ng-click="removeItem($index)" style="cursor: pointer;">X</a>]
                        </td>
                    </tr>
                     <tr>
                        <td></td>
                        <td>Total:</td>
                        <td>{{total() | currency : "£" }}</td>

                    </tr> 
                </table>


            </article>

              </label>
            </div> 
        </div>

And HTML for the buttons:

<apex:outputPanel id="basketPanel" layout="none">                            
                        <a href="#content" class="btn-cart">
                            <apex:commandButton styleClass="btn btn-default btn-buy" onClick="microappscope().addItem('{!p.name}',{!p.Recommended_Retail_Price__c});" value="Add to Basket" id="btn" rerender="btn" action="{!addProductToCart}" >
                                <apex:param name="pId" value="{!p.Id}" assignTo="{!selectedProductId}"/>
                            </apex:commandButton>
                        </a>
                    </apex:outputPanel>

I want to show the div with id #content which is hidden by default on click of a button class btn-cart. And the div should open on top of the button. The problem is that I have many buttons in the page and on click of each of the button the same div will open relative to the position of the button that is being clicked.

See screenshot attached:

Answer 1

You can find the current position (relatve to the document) of the clicked button by using .offset() and then change your div's offset according to that.

$('button').click(function(){
   var pos = $(this).offset();
    $('#toShow').show();
    $('#toShow').offset( pos );

}); 

Here is small example: http://jsfiddle.net/zje0uu9y/1/