Bootstrap accordion not working if ID is number

Question

I have problems after upgrading Bootstrap to 4.2.1 version. In this version when I use id="#12" in accordion it's not working. In previous versions it worked fine with id="#12". Any ideas?

  <div id="accordion">
    <div class="card">
  <div class="card-header" id="headingOne">
     <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#12"
           aria-expanded="true" aria-controls="collapseOne">
        Collapsible Group Item #1
        </button>
     </h5>
  </div>
  <div id="12" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
     <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
        richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
        dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
        moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
        assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
        wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
        vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
        synth nesciunt you probably haven't heard of them accusamus labore
        sustainable VHS.
     </div>
  </div>

Let's forget about Bootstrap for a moment. I'm not surprised that some software out there will have a problem with you using a `#` in the actual name of your ID. The `#` sign is reserved for targeting the ID in CSS rules, so in your case your CSS selector would be `##12` which is asking for trouble. I would say if it's worked for you up until now, you've been lucky, and continued use of this naming scheme is just playing with fire. — Kalnode, Jan 22 '19 at 15:36

mistahenry · Answer 1 · 2019-01-22T15:41:00.370

While in HTML 5, it is valid to start an id with a numeric, CSS doesn't allow leading numerics.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.

Internally, Bootstrap 4 is using

getSelectorFromElement(element) {
    let selector = element.getAttribute('data-target')

    if (!selector || selector === '#') {
      const hrefAttr = element.getAttribute('href')
      selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : ''
    }

    try {
      return document.querySelector(selector) ? selector : null
    } catch (err) {
      return null
    }
  }

To lookup your element. querySelector requires a valid CSS selector

A DOMString containing one or more selectors to match. This string must be a valid CSS selector string; if it isn't, a SYNTAX_ERR exception is thrown.

I'd recommend just using a valid CSS identifier. There's also tricks you can do to escape, but unless if you have to, just use a different selector

score 2 · Answer 2 · answered Jan 22 '19 at 17:26

An id should start with a letter.

From google dev tools:

From https://developer.mozilla.org:

Using characters except ASCII letters, digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility.

Also a helpful question to check here: What are valid values for the id attribute in HTML?.

If you need to use numbers try to do somethis like this:

#d12 or #d-12

score 0 · Answer 3 · answered Apr 08 '21 at 14:12

For anyone still having the same issue, I fixed mine by adding a character "#a" to every id in my list like this :

id={"#a"+item.id}

Instead of :

id={"#"+item.id} or id={item.id}

So everytime the id is generated, it's already preceded by a character no matter what type is the id.

Bootstrap accordion not working if ID is number

3 Answers3

Linked