Remove underline on hover for jquery accordion

Is it possible to remove the underline (text-decoration:none) for the jquery ui accordion?

I tried many different solutions, but none seem to work. Maybe I am not selecting the proper style id.

For example...

$('#accordion .ui-state-hover').attr('style', 'text-decoration:none');
$('#accordion .ui-state-focus').attr('style', 'text-decoration:none');
$('#accordion .ui-state-hover').css('text-decoration', 'none');

EDIT: I understand that I can just change the CSS stylesheet, but I only want to do this for ONE of the many accordions.

EDIT2: Here is the actual code...

<style type="text/css">
.myAccordion.ui-state-hover, .myAccordion.ui-state-focus {text-decoration:none !important;}
</style>

<!--Downtime Announcement begin-->
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("#accordion").accordion({
                collapsible: true,
                active: false
            });
            $('#accordion .ui-icon').attr('style', 'display: none');
            $('#accordion .ui-accordion-header').attr('st开发者_高级运维yle', 'background:#A4000F');
            $('#accordion .ui-accordion-header a').attr('style', 'font-weight:bold;font-size:13px;color:white');
            $('#accordion .ui-accordion-content').attr('style', 'background:#A4000F;width:auto');
            $('#accordion .ui-accordion-content p').attr('style', 'font: 14px/16px Arial,Helvetica,sans-serif;color:white');
            $('#accordion .ui-state-hover').addClass('myAccordion');
            $('#accordion .ui-state-focus').addClass('myAccordion');

        });
    </script>

    <div id="accordion" >
        <h3><a href="#">Important Announcement</a></h3>
        <div>
            <p>Beginning at 6pm EDT on April 1st, 2011 our websites will be down for a system upgrade. Please return later in the weekend when the site will return to full availability.</p>
        </div>
    </div>
<!--Downtime Announcement end-->

---

You need to modify the stylesheet that comes with jQuery UI.

---

Try:

$('#accordion .ui-state-hover').css('text-decoration','none');

Edit after few comments:

When you don't want to modify all accordions, then just create new css class ie. "myAccordion", then use jquery to addClass to those two selectors.

$('#accordion .ui-state-hover').addClass('myAccordion');
$('#accordion .ui-state-focus').addClass('myAccordion');

And modify stylesheet like:

.myAccordion.ui-state-hover, .myAccordion.ui-state-focus {text-decoration:none;}

If this rule isn't strong enugh, then modify:

.myAccordion.ui-state-hover, .myAccordion.ui-state-focus {text-decoration:none !important;}

---

From the looks of it, it seems the underline is on the anchor element. So, just use this as CSS:

#accordion .ui-accordion-header a {
    text-decoration: none;
}

or via script as:

$('#accordion .ui-accordion-header a').css('text-decoration','none');

I set this up on jsFiddle for a quick demo: http://jsfiddle.net/93hw2. I'm sure this will come in handy in the future.

---

did u try this:

$('#accordion .ui-state-hover').css('text-decoration', 'none');
$('#accordion .ui-state-focus').css('text-decoration', 'none');

remember to do that AFTER the load of the accordion