CODEWITHSUNDEEP
jquery-uijquery-ui-accordion
Abe
Abe

Reputation: 23918

Change the header size on a jquery UI accordion?

I'm trying to set up styles for two different kinds of accordions on a site. How do I change the header size for one, but not the other?

I've tried

<div class="big-accordion">
 <h3 style="height:40px;"><a href="#">from your computer</a></h3>
 <div>
 ...

With the css equivalent:

big-accordion .h3{ height:40px }

But it doesn't look good for small heights -- the text tends to run out of the bottom of the header.

Any suggestions for doing this in a cleaner way?

Upvotes: 0

Views: 8641

Answers (3)

codenamezero
codenamezero

Reputation: 3079

Make a new style for your h3 in the css.

h3.bigheader {
   height: 40px;
}

<h3 class="bigheader">

Upvotes: 0

Patricia
Patricia

Reputation: 19

I just got stuck on the same problem and the solution here didn't work so just wanted to share what worked for me. Using jQuery UI 1.10.4

$(".ui-accordion .ui-accordion-header").css({ "padding-top":"2px", "padding-bottom":"2px" });

Upvotes: 2

Abe
Abe

Reputation: 23918

In the end, this is what worked out.

$(".accordion, .big-accordion").accordion({ event: "mouseover" });
$(".accordion .ui-accordion-header a").css({ padding:"1px 1px 1px 30px" });

Turns out that jquery UI automatically restyles the contents of the accordion, as shown here: http://jqueryui.com/demos/accordion/

Upvotes: 0

Related Questions