Collapse doesn’t work – or works on some elements…

I have a simple bootstrap collapse setup. Following https://v4-alpha.getbootstrap.com/components/collapse/

[code] <a class="btn btn-primary" data-toggle="collapse" href="#c7a15f22" aria-expanded="false" aria-controls="c7a15f22"> Link with href </a> <div class="collapse" id="c7a15f22"> <div class="card card-block"> Anim pariatur cliche </div> </div> [/code]

But, the most peculiar thing, it works on some elements, not others…

Turns out, the problem is with the id attribute. Bootstrap secretly checks to make sure it starts with a letter:

[code] return e || (e = t.getAttribute("href") || "", e = /^#[a-z]/i.test(e) ? e : null), e [/code]

Whatever reason, this is against the specs:

The id attribute specifies its element's unique identifier (ID). [DOM] The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters. There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

Not so cool, bootstrap.

Written on March 16, 2017