How to present information in a limited amount of space in accordion jquery?

How to present information in a limited amount of space in accordion jquery?

Hi,
Iam using this code to show the product image,price ,description in a dialog.iam using accordion menu also.But the problem is  description does not showing in a limited amount of space in accordion.like this it is showing.What is the reason for this?What  i have to do now?


My jquery is as follows:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
   
    $(function () {
        debugger;
        $("#dialog").dialog({
            
            modal:true,
            autoOpen: false,
            draggable:true,
            resizable: false,
            width: "auto"
            
        });
       
        $(".dialogify").bind("click", function(e) {
            e.preventDefault();
            $("#dialog").dialog('option', 'title', $(this).next().find('img').attr('title'));      
            $("#accordion").accordion();
            $("#dialog").html("<img src='" + $(this).next().find('img').attr('src') + "' width='150' + height='150'>"+"<label>"+"<br/>"+ $(this).next().find('img').attr('price')+"<br/>"+"</label>"+"<label>"+$(this).next().find('img').attr('desc')+"</label>"+"<br />"+"<input type='button' value='@(Model.ProductPrice.AvailableForPreOrder ? T("ShoppingCart.PreOrder") : T("ShoppingCart.AddToCart"))' class='button-2 product-box-add-to-cart-button' onclick='AjaxCart.addproducttocart('@addtocartlink ');return false;' />")
            $("#dialog").dialog("option", "position", {
                
                   modal:"true",
               my: "center",
               at: "center",
               title:"title",
               of: window

           });
            if ($("#dialog").dialog("isOpen") == false) {
                $("#dialog").dialog("open");
           }
       });
   });
</script>

Html
<div class="product-item" data-productid="@Model.Id" style="position:relative" id="accordion">
     
       <div class="picture">
          <a href=#  class="dialogify" data-width="350" data-height="300">Quickview</a>
        <a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title"> 
            <img alt="@Model.DefaultPictureModel.AlternateText"  price="@Model.ProductPrice.Price" desc="@Model.ShortDescription"src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title"   />
        </a>
           <div id="dialog" ></div>
    </div>

    <div class="details">
        <h2 class="product-title">
            <a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })">@Model.Name</a>
        </h2>
        <div class="description" id="desc">
            @Html.Raw(Model.ShortDescription)
        </div>
        <div class="add-info">
            <div class="prices" id="pri">
                @if (!String.IsNullOrEmpty(Model.ProductPrice.OldPrice))
                {
                    <span class="price old-price">@Model.ProductPrice.OldPrice</span>
                }
                <span class="price actual-price" id="price">@Model.ProductPrice.Price</span>
            </div> 
            <div class="buttons">
                @*<input type="button" value="@T("Products.Details")" class="button-1 product-box-detail-button" onclick="setLocation('@Url.RouteUrl("Product", new { SeName = Model.SeName })')" />*@
                @if (!Model.ProductPrice.DisableBuyButton)
                {
                    <input type="button" value="@(Model.ProductPrice.AvailableForPreOrder ? T("ShoppingCart.PreOrder") : T("ShoppingCart.AddToCart"))" class="button-2 product-box-add-to-cart-button" onclick="AjaxCart.addproducttocart('@addtocartlink');return false;" />
                }
            </div>
            @Html.Widget("productbox_add_info")
        </div>
    </div>
</div>