Question

I am creating a Jquery accordion from the following HTML

<div class="title"><a href="javascript:void(0)">Title goes here</a></div>
<div class="body">Body goes here</div>

The accordion works and has a border around it which I like. However, when an element is expanded, I would like to remove the bottom border of the header. Is this possible? For an example of what I need, try

<div class="title" style="border-bottom:0px;"><a href="javascript:void(0)">Title goes here</a></div>
<div class="body">Body goes here</div>

I need the above style but only for the active element in the accordion. I tried setting the style for

.ui-accordion-header-active

but it does not work. Any ideas?

Edit: here is a Js fiddle to test it. I’d like to get rid of the dividing line between title and body.

http://jsfiddle.net/2LkS6/

Answer 1

You can simply add the following css:

.ui-accordion-header-active {
    border-bottom: none;
}

updated fiddle