Geek Answers Handbook

Selected state in jQuery Accordian

I just use jQuery accordion in its basic form. I cannot, for the life of me, find the selected class in this thing. I just want to make some css, for example:

#accordion h2 a.selected { color: #000; }

So, while your single item is selected or active, the title link remains black

I know that this dead is simple, and I did it with other things, I just lost a little in the documentation for this accordion. Is this a different class? Is this something I need to add first?

 $(document).ready(function() { $( "#accordion" ).accordion({ autoHeight: false, navigation: true, header: 'h2' }); });

Thanks.

+4
source share
3 answers

Chrome Inspector saves the day!

Here are the classes I found:

 ui-accordion-header ui-helper-reset ui-state-active ui-corner-top

I would suggest that this should do this:

 .ui-state-active a { ... }
0
source

Try using the following CSS

 .ui-state-active a { color: #000;}

If this does not work, try to make it more specific.

0
source

I assume that you are using not only this jQuery accordion , but also one of the jQuery user interface themes ... like this one .

If we look at line 350 , we will see this rule that sets the CSS color property:

 .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121/*{fcActive}*/; text-decoration: none; }

So, do some math and calculate the specifics of the selector :

  • This is in the style attribute :? 0
  • Number of id selectors? 0
  • The number of attributes and pseudo-classes? 5
  • The number of element names? 3

... therefore your new rule should be more specific than 0,0,5,3 . A simple way to do this: add an id selector:

 #accordion .ui-state-active a { /* 0, 1, 1, 1 > 0, 0, 5, 3 */ }

Check out the JsFiddle demo .

0
source

More articles:


All Articles