Unable to configure the UI Accordion

Unable to configure the UI Accordion

I copied the accordion code from the jquery UI documentation into a new .html file and the accordion works.  But when I replace the text in one of the divs  with a larger paragraph, not all of the text is shown when that div is opened.  Instead, it's cut off and a scroll bar is provided at the right of the window to see the rest of the text.  I tried defeating this behavior by  inserting the jQuery line

                                  $( ".selector" ).accordion({ autoHeight: false });  

as the documentation seems to recommend to turn this behavior off, but this line doesn't seem to have any effect.  I highlighted below where I added it.

      
<!DOCTYPE html>
<html>
    <head>
    <title>Accordion></title>
   
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
 
  <script>
  $(document).ready(function() {
          $("#accordion").accordion();
          $( ".selector" ).accordion({ autoHeight: false });
  });
  </script>
  <style type="text/css">
  div#content
            {
                width:700px;
                margin-right:auto;
                margin-left:auto;
            }
</style>
</head>
<body>
 
<div id="content">
    <div id="accordion">
        <h3><a href="#">Section 1</a></h3>
        <div>
            <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer

==================

Does anyone know what's going on here.  The behavior I want is for the window to open as wide as it takes to include all the text in that div, with some top and bottom margins and no scroll bar at the right. It's fine with me if each window opens to a different height when the amount of text in each widow is different.

Thanks for any help.
Steve