如何在jQuery中单击该按钮时显示相对于按钮位置的div

这是我的代码：

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

        }

HTML：

对于要显示的div：

<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>

和按钮的HTML：

<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>

我想显示id为 #content 的div，默认情况下，单击按钮类 btn-cart 时会隐藏它 . div应该在按钮顶部打开 . 问题是我在页面中有许多按钮，并且在点击每个按钮时，相同的div将相对于被点击的按钮的位置打开 .

见附件截图：