CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
NicoESIEA
NicoESIEA

Reputation: 539

Bootstrap accordion works only for 2 items on 4

My accordion is working but only for the #2 and #3 item, not for the first and the #4... Why?

I tried to align the HTML using F12, but even like this they do not work

<div class="back-content" id="lib-uses">
  <ul class="list-group list-common-lib">
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" href="#10a7c48d6b" aria-expanded="false">
          <li class="list-group-item d-flex justify-content-between align-items-center" title="src/Common.Gateway">Common.Gateway<span
              class="badge badge-primary badge-pill">2</span>
          </li>
        </a>
      </div>
      <div id="10a7c48d6b" class="accordion-body in collapse">
        <div class="accordion-inner">
          <li class="list-group-item d-flex justify-content-between align-items-center" title="ion.Document">ion-back
            - ion.Document<span class="badge badge-primary badge-pill">1.2.0</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center" title="lication.Common.Foundation">lication-back
            - lication.Common.Foundation<span class="badge badge-primary badge-pill">1.3.5</span>
          </li>
        </div>
      </div>
    </div>
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle collapsed" data-toggle="collapse" href="#d39fe230f8" aria-expanded="false">
          <li class="list-group-item d-flex justify-content-between align-items-center" title="src/Common.HealthChecks">Common.HealthChecks<span
              class="badge badge-primary badge-pill">18</span>
          </li>
        </a>
      </div>
      <div id="d39fe230f8" class="accordion-body in collapse">
        <div class="accordion-inner">
          <li class="list-group-item d-flex justify-content-between align-items-center" title="Dashboard.Shared">dashboard-back
            - Dashboard.Shared<span class="badge badge-primary badge-pill">1.3.6</span>
          </li>
        </div>
      </div>
    </div>
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" href="#ffb2de0f76">
          <li class="list-group-item d-flex justify-content-between align-items-center" title="src/Common.Logger">Common.Logger<span
              class="badge badge-primary badge-pill">1</span>
          </li>
        </a>
      </div>
      <div id="ffb2de0f76" class="accordion-body collapse in">
        <div class="accordion-inner">
          <li class="list-group-item d-flex justify-content-between align-items-center" title="anagement.Common.Startup">agement-back
            - anagement.Common.Startup<span class="badge badge-primary badge-pill">1.3.6</span>
          </li>
        </div>
      </div>
    </div>
    <div class="accordion-group">
      <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" href="#4677739af5">
          <li class="list-group-item d-flex justify-content-between align-items-center" title="src/Common.MFT">Common.MFT<span
              class="badge badge-danger badge-pill">0</span>
          </li>
        </a>
      </div>
      <div id="4677739af5" class="accordion-body collapse in">
        <div class="accordion-inner"> </div>
      </div>
    </div>
  </ul>
</div>

I expect to have each item collapsable and expendable (in case of they are not empty.... but even if they are in fact...)

Upvotes: 1

Views: 401

Answers (2)

Arpita Patel
Arpita Patel

Reputation: 350

you can change the id of div: id="10a7c48d6b" to id="a10a7c48d6b" and same for next.

<a class="accordion-toggle collapsed" data-toggle="collapse" href="#a10a7c48d6b" aria-expanded="false">
<div id="a10a7c48d6b" class="accordion-body in collapse">

<a class="accordion-toggle" data-toggle="collapse" href="#a4677739af5">
<div id="a4677739af5" class="accordion-body collapse in">

because id can not start with digit.

Upvotes: 1

Ravi
Ravi

Reputation: 1330

You are having ID which begins with Number like id="10a7c48d6b"

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

You have to follow Naming Rules for ID in HTML

You can refer more

https://www.w3.org/TR/html4/types.html#type-id for HTML 4 and https://html.spec.whatwg.org/multipage/dom.html#element-attrdef-global-id for HTML 5

Upvotes: 1

Related Questions