Question

In this fiddle, click the Policies button, click the New policy button and, according to the second line of this html (near the bottom of the code)

<fieldset id="NewpolicyOverlay" class="menuAbuttons">
  <p><a href="#" class="menuA menuA-open returnBttn" name="level02" title="Create a new policy"><span>New policy</span></a></p>
  <a href="#" id="NewPolicy" class="menuA menuA-open overlayBttnA" name="NewPolicy"><span>Policy</span></a>
  <a href="#" id="Sections" class="menuA overlayBttnA" name="Sections"><span>Sections</span></a>
  <a href="#" id="Transaction" class="menuA overlayBttnA" name="Transaction"><span>Transaction</span></a>
  <a href="#" id="NewPolicySubmit" class="menuB overlayBttnA" name="NewPolicySubmit"><span>Submit</span></a>
</fieldset>

the New policy button should display as ‘open’ (i.e. look the same as the Policy button below it). Even when I inspect the element with FF it doesn’t have the menuA-open class. But the code above clearly says it should. It gets the other two classes: menuA and returnBttn, but not the menuA-open class.

In simple terms, the New policy button should be grey with a blue border after it’s been clicked.

Can anyone please solve this riddle?

Thank you

Chris

Answer 1

You remove the class menuA from that element when you click “Policies”. You should alter your selector so as to only remove that class from <a> elements from the top bar (I assume you want that): http://jsfiddle.net/FBvkQ/1/.

$(".menuA").click(function() {
    // ...
    $('#menudiv > .menuA') // ...