$('#id').attr('aria-expanded') === true) not working

Question

Sorry if not seeing a minor mistake, but I cannot get my code to work as I wish.

First: Here is a JSFiddle . (Maximise the result-window to see the problem better).

Click on any of the buttons. Then click the other button. Works as I intended.

The problem occurs when I click the same button twice. The area collapses (as intended), but the other button expands his width.

I tried the following: Don't do anything, when the area is expanded.

If you have a look at the js-part:

 else if ($(this).attr('aria-expanded') === true)

It does not evaluate true, even when the console logs the property

 console.log($(this).attr('aria-expanded'))

as true and false , and the debugging tools shows the property and the toggle when clicking.

Please tell me if my if-logic is flawed, or if I do not access the aria-expanded property correctly.

To rephrase or sum up my problem again:

If I click a button twice in a row, I do only want to toggle the area, but not the width of the buttons.

I am open to any suggestions involving a check for other properties than aria-expanded .

Answer 1

attr()返回一个字符串：

else if ($(this).attr('aria-expanded') === 'true')