Foundation Tabs and Designer Content - help please

Permalink
I have been working on a solution for tabbed Designer Content where what I have is a hardcoded (or html block) list of links, another hardcoded set of areas which accept Designer Content blocks, and finally an iseditmode? check which turns off the tabs when in edit mode, allowing the user to make simple changes to the content of the blocks.

I had everything working with the jqueryUI tabs but since my theme is Foundation based I thought to try and use that for the tabs instead. Trouble is it refuses to work, I've slept on it and still losing hair so I wondered if anyone could spot my mistake?

The page ishttp://signlanguagemedia.co.uk/index.php/our-team/...

I hope to eventually package it all up (once I have it working!) but for now my jquery is in the header

<script src="<?php echo $this->getThemePath()?>/javascripts/jquery.foundation.tabs.js"></script>
<!-- Included JS Files -->
<?php if (!$c->isEditMode()): ?>
<script>
$(document).ready(function() {
$(document).foundationTabs();
});
</script>   
<?php endif; ?>


the links area

<dl class="tabs four-up contained">
 <ddclass="active">                  
  <a href="#louise-tab">Louise Harte</a>
 </dd>
 <dd>
  <a href="#clive-tab">Clive Mason</a>
 </dd>
 <dd>
  <a href="#clair-tab">Clair Chilton</a>
 </dd>
 <dd>
  <a href="#jacqui-tab">Jacqui Beckford</a>
 </dd>
</dl>


and then another section with four hardcoded block areas taking a Designer Content block each

<ul class="tabs-content contained">
 <li id="#louise-tab" class="active">   
  <div>
   <?php my content ?>
  </div>
 </li>
 <li id="clive-tab">
  <div>
   <?php my content ?>
  </div>
 </li>
 <li id="clair-tab">
  <div>
   <?php my content ?>
  </div>


any help really appreciated!