jQuery How to keep sublevel item highlighted and parent category expanded in accordion menu?

[sacdesigner]

I am using a jQuery vertical multilevel accordion menu and am looking to achieve the following:

I would like to be able to keep the child label in the menu highlighted for whatever page you are currently on as well as keep the parent category that the child item falls under expanded for the particular page you are on. So far I am able to keep the parent category expanded when you are currently on a page relative to a child label and keep the parent label highlighted. But what I want is for the exact child label to be highlighted instead of the parent label but keep the parent category expanded so that the child label remains visible and highlighted for its current page. I hope this makes sense. I'm a little clueless on the correct terminology to use but any help is so much appreciated. My code that I am currently working with is below: And you may view a working sample of what I have so far at this link

Here is my HTML code:

<div class="grey demo-container">
<ul class="accordion"  id="accordion-5">
<li class="dcjq-current-parent"><a href="who.html">WHO WE ARE</a><ul>
    <li><a href="who.html">&nbsp;&nbsp;OUR TALENT</a></li>
    <li><a href="#values" class="smoothScroll">&nbsp;&nbsp;OUR VALUES</a></li>
    <li><a href="#different" class="smoothScroll">&nbsp;&nbsp;HOW WE ARE DIFFERENT</a></li>
 
</ul>
</li>
<li><a href="what.html">WHAT WE DO</a><ul>
    <li><a href="what.html">&nbsp;&nbsp;OUR MISSION</a></li>
        <li><a href="what.html">&nbsp;&nbsp;OUR BUSINESS UNITS</a></li>
    </ul>
</li>
</ul></div>

My CSS code:

.grey .accordion{font-family: 'FuturaBTBookRegular'; font-size: 14px; font-weight: normal; color: #FFFFFF;}
.grey .accordion, .grey .accordion li {margin: 0; padding: 2px 6px 2px 0; font-size: 12px; font-weight: normal; color: #FFFFFF;border: none;}
.grey .accordion a {padding: 6px 6px 6px 20px; background: none; text-decoration:none; display: block; color: #FFFFFF; position: relative;}
.grey .accordion a.dcjq-parent {background: none; font-size: 14px; font-weight: normal; color: #FFFFFF;}
.grey .accordion a.dcjq-parent:hover {background: #BEF202 url(images/bg_grey.png) repeat-x 0 -1px; color: #083B5A;}
.grey .accordion a.dcjq-parent.active {background: #BEF202; color: #083B5A;}
.grey .accordion a .dcjq-icon {position: absolute; top: 22%; left: 164px; width: 10px; margin-top: 1px; height: 15px; background: url(images/arrow_grey_right.png) no-repeat 0 center; color: #FFFFFF;}
.grey .accordion a.dcjq-parent.active .dcjq-icon {background: url(images/arrow_grey_down.png) no-repeat 0 center; color: #FFFFFF;}
.grey .accordion a:hover {background-color: #BEF202; color: #083B5A;}
.grey .accordion a:active{background-cololr: #BEF202; color: #083B5A;}

And my JS options code:

<script type="text/javascript">
$(document).ready(function($){
					
					$("#accordion-5").dcAccordion({
						eventType: 'hover',
                                                                                                            hoverDelay: 200,
						autoClose: true,
						saveState: false,
						disableLink: false,
						menuClose: true,
						speed: 'fast',
						showCount: false,
                                                                                                            autoExpand: true,
						classExpand: 'dcjq-current-parent'
					});
});
</script>

If you need a look at the JS file it can be found here.