CODEWITHSUNDEEP
jquery-ui
Joe
Joe

Reputation: 4928

jQuery accordion header different width than content

I am using a jquery accordion with just one content panel like so:

<ul id="myaccordion">
    <li>
        <a href="#">Header Title</a>
        <div>
            Content in here.
        </div>
    </li>
</ul>

and then calling:

$('#myaccordion').accordion();

The problem I'm having is that the content part of the accrodion id the correct width, but the header is merely the width of the text that says 'Header Title' and this text is overlapping the arrow icon.

Can anyone see why the header wouldn't be the same width as my content? I have tried setting a specific with to the ul, the li and the a tags, but to no effect.

Many thanks in advance.

Upvotes: 0

Views: 2470

Answers (1)

Nick Craver
Nick Craver

Reputation: 630607

The accordion code expects a header around that anchor for styling (or any wrapper element really), since this styling here needs it:

.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }

Just add a wrapper in there, like this:

<ul id="myaccordion">
    <li>
        <h3><a href="#">Header Title</a></h3>
        <div>
            Content in here.
        </div>
    </li>
</ul>

Here's a demo showing both with and without the <h3>, so you can see the effect.

Upvotes: 2

Related Questions