Spry Accordion menu - How do you make tabs without content and make panel height fit the content?

Question

I have an Accordion Menu on my site and I would like to put a tab at the top that links to my homepage when clicked, instead of sliding open to show a content panel. I don't have any extra info to put in the content panel, so it would look kind of redundant to have it there.
Also, each panel has a different amount of content, but they all default to the same height to fit the largest content. I want them to fit to the content of each panel. The only thing I've read said to set the height of the content panel to 100% in the CSS, but it didn't change anything.
Thanks!
Andrea
http://www.andreamutsch.com

Answer 1

You make it look so simple but it doesn't seem to be working for me...
My first thought with getting rid of the tab content was to simply delete it, but when I do that I get a warning that 'The structure of the accordian appears to be damaged'. Then when I preview none of the tabs will open.
This is what my accordian structure looks like with the tab content code deleted...
<div id="Accordion1" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">home</div>
        </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">graphic design</div>
        <div class="AccordionPanelContent">
          <p align="center">identity </p>
          <p align="center">print </p>
          <p align="center">packaging</p>
          <p align="center">web </p>
        </div>
      </div>
<div class="AccordionPanel">
        <div class="AccordionPanelTab">photography</div>
        <div class="AccordionPanelContent">
          <p>traditional</p>
          <p>digital</p>
          <p>retouch</p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">contact</div>
        <div class="AccordionPanelContent">
          <p>email me</p>
          <p>design quote</p>
          <p>purchase photography</p>
        </div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">resume</div>
        <div class="AccordionPanelContent">download resume (.pdf)</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">design blog</div>
        <div class="AccordionPanelContent">2009</div>
      </div>
Also, getting rid of the height in the CSS had no effect (I did this before I did the above)
Below is my current CSS for the Panel Content
.AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: large;
    background-color: #633408;
    font-weight: normal;
    word-spacing: normal;
    text-align: center;
Also there is a note in the CSS that says this...
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
I'm not sure how accurate that is since I don't have a height in there and it worked (although not how I wanted) but I just thought I would throw it in.