Hi any JQuery Gurus out there,

I am trying to adapt the dnntabs plugin demo on http://uxguide.dotnetnuke.com/UIPatterns/Tabs.aspx to load with only the tabs i.e. no content visibile on load (it always shows the first tab content as default.
I want to create multiple rows of Icons that only show their content when clicked, also only 1 row at a time should be open at any time, something I had working with JQuery UI and VS,  Unfortunatly this will not work very well in DNN due to a conflict (somewhere).

Hence trying to use DnnPlugin. I have tried using the ususal javascript? but no avail.

<script type="text/javascript">
      jQuery(function ($) {
          $('#tabs-demo,#tabs-demo2').dnnTabs({ collapsible: true,   active: 'none', selected: -1  });
      });    
</script> 

<div class="dnnForm" id="tabs-demo">
        <ul class="dnnAdminTabNav">
            <li><a href="#ChristopherColumbus">Christopher Columbus</a></li>
            <li><a href="#IsaacNewton">Isaac Newton</a></li>
            <li><a href="#JohannesGutenberg">Johannes Gutenberg</a></li>
        </ul>
        <div id="ChristopherColumbus" class="dnnClear">
            <img src="<%=ResolveUrl("Images/498px-Christopher_Columbus.PNG") %>" alt="Christopher Columbus" width="32%" class="dnnLeft" />
            <div class="dnnRight" style="width:62%;margin-left:2%">
              <h1>Christopher Columbus</h1>
                <p>Italian navigator, colonizer and explorer whose voyages led to general European awareness of the American continents.</p>
            </div>
        </div>
        <div id="IsaacNewton" class="dnnClear">
            <img src="<%=ResolveUrl("Images/GodfreyKneller-IsaacNewton-1689.jpg") %>" alt="Isaac Newton" width="32%" class="dnnLeft" />
            <div class="dnnRight" style="width:62%;margin-left:2%">
              <h1>Isaac Newton</h1>
                <p>English physicist, mathematician, astronomer, natural philosopher, alchemist, and theologian. His law of universal gravitation and three laws of motion laid the groundwork for classical mechanics.</p>
            </div>
        </div>
        <div id="JohannesGutenberg" class="dnnClear">
            <img src="<%=ResolveUrl("Images/Gutenberg.jpg") %>" alt="Johannes Gutenberg" width="32%" class="dnnLeft" />
            <div class="dnnRight" style="width:62%;margin-left:2%">
              <h1>Johannes Gutenberg</h1>
                <p>German printer who invented the mechanical printing press.</p>
            </div>
        </div>
  </div>

<div class="dnnForm" id="tabs-demo2">

????????????/etc etc

Interesting cathal.

Ok I was able to replace the code in my JQuery.js with the version on GIThub without any difference, I assume this is what I was supposed to do?.

Any other tip Cathal, the only thing not