Изменить размер заголовка на аккордеоне пользовательского интерфейса jquery?

Question

Я пытаюсь настроить стили для двух разных видов аккордеонов на сайте. Как изменить размер заголовка для одного, а не для другого?

Я пробовал

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

С эквивалентом CSS:

big-accordion .h3{ height:40px }

Но для небольших высот это выглядит не очень хорошо - текст, как правило, выходит за пределы нижней части заголовка.

Какие-нибудь предложения по более чистому способу?

Answer 1

Я просто застрял на той же проблеме, и решение здесь не сработало, поэтому просто хотел поделиться тем, что сработало для меня. Использование jQuery UI 1.10.4

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

Answer 2

В конце концов, это то, что сработало.

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

Оказывается, что пользовательский интерфейс jquery автоматически меняет стиль аккордеона, как показано здесь: http://jqueryui.com/demos/accordion/

Answer 3

Создайте новый стиль для вашего h3 в CSS.

h3.bigheader {
   height: 40px;
}

<h3 class="bigheader">