Address and open a bootstrap accordion via an anchor link-CodePudding

here is what I would like to implement:

I am using Bootstrap v3.4.1 for a project and have two columns side by side. I would like to use the links in the hotspot banner (left column) to address the associated Accordions (right column) and also open them directly.

Does anyone have an idea how this can be realized?

In the left column I have a hotspot banner:

<div >
  <section > 
      <img src="/images/produktbeschreibung/wheel-585x.png" alt="" > 
          <a  href="#"> 
              <span >Harz</span> 
              <span ></span> </a> 
          <a  href="#collapse3"> 
              <span >Felge</span> 
              <span ></span> </a> 
          <a  href="#"> 
              <span >Speichen</span> 
              <span ></span> </a> 
          <a  href="#"> 
              <span >Nabe</span> 
              <span ></span> </a> 
  </section>
</div>

In the right column I have a Bootstrap Accordion:

<div >
  <div  id="accordion" role="tablist">
    <div >
      <div  id="heading1" role="tab">
        <h4 >
          <button  data-parent="#accordion" data-toggle="collapse" href="#collapse1" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Harz</button>
        </h4>
      </div>
      <div  id="collapse1" role="tabpanel" aria-expanded="false" style="height: 0px;">
        <div >
          <p>some text</p>
        </div>
      </div>
    </div>
    <div >
      <div  id="heading2" role="tab">
        <h4 >
          <button  data-parent="#accordion" data-toggle="collapse" href="#collapse2" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Felge</button>
        </h4>
      </div>
      <div  id="collapse2" role="tabpanel" aria-expanded="false" style="height: 0px;">
        <div >
          <p>some text</p>
        </div>
      </div>
    </div>
    <div >
      <div  id="heading3" role="tab">
        <h4 >
          <button  data-parent="#accordion" data-toggle="collapse" href="#collapse3" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Speichen</button>
        </h4>
      </div>
      <div  id="collapse3" role="tabpanel" aria-expanded="false" style="height: 0px;">
        <div >
          <p>some text</p>
        </div>
      </div>
    </div>
    <div >
      <div  id="heading4" role="tab">
        <h4 >
          <button  data-parent="#accordion" data-toggle="collapse" href="#collapse4" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Name</button>
        </h4>
      </div>
      <div  id="collapse4" role="tabpanel" aria-expanded="false" style="height: 0px;">
        <div >
          <p>some text</p>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Add data-toggle="collapse" href="#collapse2" to the links to open #collapse2. In order to prevent hashchange event firing, you can change the <a> element to another tag, for example '`

.btn-link {
  cursor: pointer
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN Bdg0JdbxYKrThecOKuH5zCYotlSAcp1 c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<div >
  <section >
    <img src="/images/produktbeschreibung/wheel-585x.png" alt="" >
    <span  data-toggle="collapse" data-parent="#accordion" href="#collapse1">
      <span >Harz</span>
    <span ></span>
    </span>
    <span  data-toggle="collapse" data-parent="#accordion" href="#collapse2">
      <span >Felge</span>
    <span ></span>
    </span>
    <span  data-toggle="collapse" data-parent="#accordion" href="#collapse3">
      <span >Speichen</span>
    <span ></span>
    </span>
    <span  data-toggle="collapse" data-parent="#accordion" href="#collapse4">
      <span >Nabe</span>
    <span ></span>
    </span>
  </section>
</div>


<div >
  <div  id="accordion" role="tablist">
    <div >
      <div  id="heading1" role="tab">
        <h4 >
          <button  data-parent="#accordion" data-toggle="collapse" href="#collapse1" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Harz</button>
        </h4>
      </div>
      <div  id="collapse1" role="tabpanel" aria-expanded="false" style="height: 0px;">
        <div >
          <p>some text</p>
        </div>
      </div>
    </div>
    <div >
      <div  id="heading2" role="tab">
        <h4 >
          <button  data-parent="#accordion" data-toggle="collapse" href="#collapse2" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Felge</button>
        </h4>
      </div>
      <div  id="collapse2" role="tabpanel" aria-expanded="false" style="height: 0px;">
        <div >
          <p>some text</p>
        </div>
      </div>
    </div>
    <div >
      <div  id="heading3" role="tab">
        <h4 >
          <button  data-parent="#accordion" data-toggle="collapse" href="#collapse3" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Speichen</button>
        </h4>
      </div>
      <div  id="collapse3" role="tabpanel" aria-expanded="false" style="height: 0px;">
        <div >
          <p>some text</p>
        </div>
      </div>
    </div>
    <div >
      <div  id="heading4" role="tab">
        <h4 >
          <button  data-parent="#accordion" data-toggle="collapse" href="#collapse4" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Name</button>
        </h4>
      </div>
      <div  id="collapse4" role="tabpanel" aria-expanded="false" style="height: 0px;">
        <div >
          <p>some text</p>
        </div>
      </div>
    </div>
  </div>
</div>