Spry tabbed panel in editable region will not allow editing

Question

Yesterday I was building a spry tabbed panel onto an existing template I created in an editable region, the whole right column is editable.  Today, I get a no editing stop sign instead of a cursor in the whole tabbed panel except the tabs.  However, my tabs are labeled correctly, but the panels need additional information added to them.  Here is the source code:<!-- InstanceBeginEditable name="right_column" -->
    <h2>Hewescraft
    </h2>
    <div id="Hewescraft_boats" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Sportsman</li>
        <li class="TabbedPanelsTab" tabindex="0">Pro V</li>
        <li class="TabbedPanelsTab" tabindex="0">Sea Runner</li>
        <li class="TabbedPanelsTab" tabindex="0">Ocean Pro</li>
        <li class="TabbedPanelsTab" tabindex="0">Alaskan</li>
        <li class="TabbedPanelsTab" tabindex="0">Pacific Cruiser</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
          <h3>Sportsman Series</h3>
          <p><img src="imageswebsite/Hewescraft/sportsmancanvasstop.jpg" width="602" height="276" alt="hewescraft sportsman" /></p>
          <p>Insert Text</p>
          <p>Click <a href="Links/HewesCraft_Sportsman[1].pdf">Here</a> for a Printable Brochure.</p>
          <p><img src="imageswebsite/untitled.jpg" width="612" height="792" alt="hewescraft sportsman features and options" /></p>
        </div>
        <div class="TabbedPanelsContent">
          <h3>Pro V Series</h3>
          <p><img src="imageswebsite/Hewescraft/prov.jpg" width="602" height="276" alt="hewescraft pro v" /></p>
          <p>Insert Text</p>
          <p>Clicke <a href="Links/HewesCraft_ProV.pdf">Here</a> for a Printable Brochure.</p>
          <p><img src="imageswebsite/Hewescraft/provfeaturesandoptions.jpg" width="612" height="792" /></p>
        </div>
        <div class="TabbedPanelsContent">
          <h3>Sea Runner Series</h3>
          <p><img src="imageswebsite/Hewescraft/searunnernomotor.jpg" width="602" height="276" alt="hewescraft searunner" /></p>
          <p>Insert Text</p>
          <p>Click<a href="Links/HewesCraft_SeaRunner.pdf"> Here</a> for a Printable Brochure.</p>
          <p><img src="imageswebsite/Hewescraft/searunnerfeaturesandoptions.jpg" width="612" height="792" alt="hewescraft searunner features and options" /></p>
        </div>
        <div class="TabbedPanelsContent">
          <h3>Ocean Pro Series</h3>
          <p><img src="imageswebsite/Hewescraft/hewesoceanpro.jpg" width="602" height="276" alt="hewescraft ocean pro" /></p>
          <p>Insert Text</p>
          <p>Click <a href="Links/HewesCraft_OceanPro.pdf">Here</a> for a Printable Brochure.</p>
          <p><img src="imageswebsite/Hewescraft/oceanprofeaturesandoptions.jpg" width="612" height="792" alt="hewescraft ocean pro features and options" /></p>
        </div>
        <div class="TabbedPanelsContent">Content 5</div>
        <div class="TabbedPanelsContent">Content 6</div>
      </div>
    </div>
    <p> </p>
    <div id="p"> </div>
    <script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("Hewescraft_boats");
    </script>
  <!-- InstanceEndEditable --></div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("rockys_menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("side_menu", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
<!-- InstanceEnd --></html>
Any ideas?

Answer 1

There is nothing wrong with the code that you have shown.
I do not use templates, in fact I hate them. I use serverside includes which allows me to update any portion of the site without having to re-upload multiple documents.
You will be better off placing your problem on the DW forum http://forums.adobe.com/community/dreamweaver/dreamweaver_general
Gramps