custom styles not effecting the nested accordion jquery - How to fix

Question

I am trying to create a custom styled accordion. So far , it works exactly how I need it to work for the outermost / parent accordion. However , the styles are getting overridden from the styles of jquery-ui when it comes to nested accordion.

LINK TO THE FIDDLE

CODE

CSS:

*
{
    padding:0px;
    margin:0px;
}

#accordion
{
    width:60%;
    margin-left: 20%;
    margin-top: 20px;
}
.subAccordion
{
    width:100%;
    margin-left: 0%;
    margin-top: 10px;
}

.ui-accordion-header
{
    background: url('');
    background-color: #3f414b;
    border-radius: 3px;
    border:0px;
    color:#afb0b3;
    font-size: 16px;
    font-weight: 300;
    padding:1em;
    margin-bottom: 10px;
}

.ui-accordion-content-active
{
    background: url('');
    background-color: #3f414b;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border:0px;
    color:#afb0b3;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    margin-bottom: 10px;
    margin-top: -10px
}

.ui-accordion-header-active
{
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    color:#afb0b3;
    font-size: 16px;
    font-weight: 300;
    border-bottom: 1px dashed #595b66;
    margin-bottom: 10px;
}

.ui-accordion .ui-accordion-icons 
{
    padding: 1em;
}
.ui-accordion .ui-accordion-content
{
    padding: 1em;
}
.subAccordion
{
    display: block;
    height: auto;
    width: 90%;
    padding: 5% !important;
}
#accordion div ul li
{
    list-style-type: none;
    line-height: 27px;
    cursor:pointer;
}
.subAccordion div ul li
{
    list-style-type: none;
    line-height: 27px;
    cursor:pointer;
}

HTML

<div id="accordion">
  <h3>Talent Supply</h3>
  <div>
    <ul>
        <li>PPP</li>
        <li>PPP Instant</li>
        <li>Patent</li>
        <li>GitHub</li>
        <li>BLSI</li>
    </ul>
  </div>
    <h3>Talent Demand</h3>
    <div class="subAccordion">
        <h3>Job Boards</h3>
        <div></div>
        <h3>Company Career Sites</h3>
        <div>
            <ul>
                <li>Microsoft</li>
                <li>PPP Instant</li>
                <li>Patent</li>
                <li>GitHub</li>
                <li>BLSI</li>
            </ul>
        </div>
    </div>
    <h3>Talent Trends</h3>
    <div>
    <ul>
        <li>News 1</li>
        <li>News 2</li>
    </ul>
    </div>
    <h3>Section 4</h3>
    <div>
        <p>
            Cras dictum. Pellentesque habitant morbi tristique senectus et netus
            et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
            faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
            mauris vel est.
        </p>
        <p>
            Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
            inceptos himenaeos.
        </p>
    </div>
</div>

JS

$(function() {
    $( ".subAccordion" ).accordion({active: false, collapsible: true});
    $( "#accordion" ).accordion();

  });
$(document).ready(function(event){
    _bindEvents();
})

function _bindEvents()
{
    $( ".subAccordion" ).on( "accordionbeforeactivate", function( event, ui ) {
        if($.trim($( ui.newPanel ).html()).length == 0)
        {
             event.preventDefault();
        }

   });

    $( "#accordion" ).on( "accordionactivate", function( event, ui ) {
        $('.ui-accordion-content').css({'height':'auto'});
    });

}

Answer 1

You just didn't specify elements styles for you subAccordion class. Try that (fore example):

.ui-accordion-header, .subAccordion .ui-accordion-header {
  #styles
}

Here the jsfiddle example with your code: http://jsfiddle.net/25dZR/1/

Answer 2

Increase the weight of your css declaration,it will override their style declaration.

Specificity reference

Answer 3

If you want your custom style to be applied add "!important" to corresponding style.

Eg:

padding:0px !important;

This will avoid other styles trying overriding it.