Trying to override jQuery UI accordion styles with CSS, not working

Question

I am trying to override the jQuery UI accordion styles using CSS but no matter what I try, I cannot seem to get it to work. I am using images as my "accordion headers" rather than H3 tags, however, I am still seeing the jQuery UI styles being applied to the accordion - it has a rounded grey border around it (I want there to be no border around the headers OR the content)

I don't want to completely remove the jQuery UI styles as I have other text-based accordions that look very good with the styling. But I cannot figure out what I'm doing wrong here with this override.

HTML:

<div class="collapsedAccordion noStyleAccordion">
<a href="#"><img src="img/complex.jpg" border="0" onmouseover="this.src='img/complex2.jpg'" onmouseout="this.src='img/complex.jpg'" /></a>
    <div>
        <p>ACCORDION 1 CONTENT</p>
    </div>
<a href="#"><img src="img/maps.jpg" border="0" onmouseover="this.src='img/maps2.jpg'" onmouseout="this.src='img/maps.jpg'" /></a>
    <div>
        <p>ACCORDION 2 CONTENT</p>
    </div>
</div>

JAVASCRIPT:

$(".collapsedAccordion").accordion({
            collapsible: true,
            autoHeight: false,
            heightStyle: "content",
            active: false
        });

CSS:

.noStyleAccordion .ui-accordion .ui-accordion-header .ui-accordion-content {
padding: none;
background: none;
border: none;
outline: none;
}

Any help would be GREATLY appreciated!

Answer 1

based on the link you provided in the comment, the order you call your elements is a bit off.

use the style below to get it working:

.noStyleAccordion .ui-accordion-header, .noStyleAccordion .ui-accordion-content {
     padding: 0;
     background: none;
     border: none;
     outline: none;
}