1

I have a jQuery UI accordion I'm using for navigation. I need to be able to highlight the active parent and it's children in 3 levels. (see image below)

I've taken a few swings, but I' having trouble with targeting the active menu and using the right selectors.

example image

Fiddle: http://jsfiddle.net/abenjamin/njHCQ/

HTML

<ul id='master' class="accordion"> <li><a class="head" href="#">1</a> <ul class="accordion main"> <li><a href="#">1 - 1</a> <ul class="accordion sub"> <li><a href="#">1 - 1 - 1</a></li> <li><a href="#">1 - 1 - 2</a></li> <li><a href="#">1 - 1 - 3</a></li> </ul> </li> <li><a href="#">1 - 2</a> <ul class="accordion sub"> <li><a href="#">1 - 2 - 1</a></li> <li><a href="#">1 - 2 - 2</a></li> <li><a href="#">1 - 2 - 3</a></li> </ul> </li> <li><a href="#">1 - 3</a> <ul class="accordion sub"> <li><a href="#">1 - 3 - 1</a></li> <li><a href="#">1 - 3 - 2</a></li> <li><a href="#">1 - 3 - 3</a></li> </ul> </li> </ul> </li> <li><a class="head" href="#">1</a> <ul class="accordion main"> <li><a href="#">1 - 1</a> <ul class="accordion sub"> <li><a href="#">1 - 1 - 1</a></li> <li><a href="#">1 - 1 - 2</a></li> <li><a href="#">1 - 1 - 3</a></li> </ul> </li> <li><a href="#">1 - 2</a> <ul class="accordion sub"> <li><a href="#">1 - 2 - 1</a></li> <li><a href="#">1 - 2 - 2</a></li> <li><a href="#">1 - 2 - 3</a></li> </ul> </li> <li><a href="#">1 - 3</a> <ul class="accordion sub"> <li><a href="#">1 - 3 - 1</a></li> <li><a href="#">1 - 3 - 2</a></li> <li><a href="#">1 - 3 - 3</a></li> </ul> </li> </ul> </li> <li><a class="head" href="#">1</a> <ul class="accordion main"> <li><a href="#">1 - 1</a> <ul class="accordion sub"> <li><a href="#">1 - 1 - 1</a></li> <li><a href="#">1 - 1 - 2</a></li> <li><a href="#">1 - 1 - 3</a></li> </ul> </li> <li><a href="#">1 - 2</a> <ul class="accordion sub"> <li><a href="#">1 - 2 - 1</a></li> <li><a href="#">1 - 2 - 2</a></li> <li><a href="#">1 - 2 - 3</a></li> </ul> </li> <li><a href="#">1 - 3</a> <ul class="accordion sub"> <li><a href="#">1 - 3 - 1</a></li> <li><a href="#">1 - 3 - 2</a></li> <li><a href="#">1 - 3 - 3</a></li> </ul> </li> </ul> </li> <li><a class="head" href="#">1</a> <ul class="accordion main"> <li><a href="#">1 - 1</a> <ul class="accordion sub"> <li><a href="#">1 - 1 - 1</a></li> <li><a href="#">1 - 1 - 2</a></li> <li><a href="#">1 - 1 - 3</a></li> </ul> </li> <li><a href="#">1 - 2</a> <ul class="accordion sub"> <li><a href="#">1 - 2 - 1</a></li> <li><a href="#">1 - 2 - 2</a></li> <li><a href="#">1 - 2 - 3</a></li> </ul> </li> <li><a href="#">1 - 3</a> <ul class="accordion sub"> <li><a href="#">1 - 3 - 1</a></li> <li><a href="#">1 - 3 - 2</a></li> <li><a href="#">1 - 3 - 3</a></li> </ul> </li> </ul> </li> </ul>

Script

 <script> $(function() { $( ".accordion" ).accordion({ active: false, collapsible: true, heightStyle : "content" }); }); </script>
Improve this question
1
  • So where is your CSS? What did you try so far for the highlighting? IMO this should be easy, when using the classes ui-accordion-header-active and ui-state-active. Commented Nov 6, 2013 at 14:57

2 Answers 2

Reset to default
3

Everything looks ok.

Your theme has same save color for active state as normal state.

Edit your theme or for testing, Add following after your the line where you include your theme:

.ui-state-active { background: #00283C; }

Here is the demo: http://jsfiddle.net/njHCQ/1/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

I didn't pick your colors and didn't do the tuning, but as written in my comment I just used the class ui-state-active.

Sample

http://jsfiddle.net/njHCQ/2/

CSS

#master .ui-state-active { background-color: #0f0; } #master .main .ui-state-active { background-color: #00f; } #master .main .sub .ui-state-active { background-color: #f00; }
Improve this answer

3 Comments

this is close... I was looking to have the whole child UL turn the color of the parent as illustrated above. #master .ui-state-active > ul { background-color: #blue; }doesn't seem to work
How this answer is different from mine below? even fiddle used is the one I created. This is the accepted answer? Cool :)
@AamirAfridi I'm sorry for you, that you did not get the reputations points. I took more time to finish my answer, but I did not copy your answer. So please don't refer to 'your fiddle'. It is the fiddle of Aaron Benjamin, the original poster. So of course we use the same URL, when I edited his version. -- I also think my answer fits better, because I also refer to the classes main and sub. -- If you think this is unfair or whatever you may flag this post, but in fact this questions is useful, so downvoting is weird. Rather ask to remove it if you feel disadvantaged.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.