Access and expand a bootstrap accordion with a hyperlink

Here is a concept I want to make happen:

For my project, I am utilizing Bootstrap v3.4.1 and have set up two columns next to each other. My goal is to link the elements in the hotspot banner (left column) to trigger and open the corresponding Accordions (right column).

Any suggestions on how to achieve this?

The left column contains a hotspot banner:

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
  <section class="hotspots--wrapper"> 
      <img src="/images/produktbeschreibung/wheel-585x.png" alt="" class="hotspots--figure"> 
          <a class="hotspot hotspot--harz" href="#"> 
              <span class="hotspot--title hotspot--title__right">Resin</span> 
              <span class="hotspot--cta"></span> </a> 
          <a class="hotspot hotspot--felge" href="#collapse3"> 
              <span class="hotspot--title">Wheel Rim</span> 
              <span class="hotspot--cta"></span> </a> 
          <a class="hotspot hotspot--speichen" href="#"> 
              <span class="hotspot--title hotspot--title__right">Spokes</span> 
              <span class="hotspot--cta"></span> </a> 
          <a class="hotspot hotspot--nabe" href="#"> 
              <span class="hotspot--title hotspot--title__right">Hub</span> 
              <span class="hotspot--cta"></span> </a> 
  </section>
</div>

In the right column, there is a Bootstrap Accordion:

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
  <div class="panel-group" id="accordion" role="tablist">
    <div class="panel panel-default">
      <div class="faq-panel-heading" id="heading1" role="tab">
        <h4 class="panel-title">
          <button class="btn btn-block faq collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapse1" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Resin</button>
        </h4>
      </div>
      <div class="faq panel-collapse collapse" id="collapse1" role="tabpanel" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
          <p>some text</p>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="faq-panel-heading" id="heading2" role="tab">
        <h4 class="panel-title">
          <button class="btn btn-block faq collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapse2" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Wheel Rim</button>
        </h4>
      </div>
      <div class="faq panel-collapse collapse" id="collapse2" role="tabpanel" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
          <p>some text</p>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="faq-panel-heading" id="heading3" role="tab">
        <h4 class="panel-title">
          <button class="btn btn-block faq collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapse3" style=&

"text-align:left; white-space:normal;" type="button" aria-expanded="false">Spokes</button>
</h4>
</div>
<div class= "faq panel - collapse collapse" id= "collapse3" role = "tebapnel" aria - expanded = "false" style= "height: 0px;">
<div class ="panel - body">
 <p> some text</p>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="faq-panel-heading" id=" heading4
                     role = "tab" >
                     < h4. cla ss = "panel - title">
                          < buttoncla sswqbthe()control-btnfa caphloed"data-partent = "#accordion"
data- toggle = "cloving
href=
aria -
expanded = falstxtakgex-lefet ; wihewasce.o :
ptypzwol bnt dta paretcllpsalshrefizorplapse) Nam euchrton <> width=<ido                   /larakingfad.gt al NZeautoo dislbeyxicTo ecv">
                                         Mr sus e tenygopuye<>ifini n     juris t)a irioma aresit el                       ensociar skidtseco       lurigtratiti-> fs acbar it ins orra din fag hal    su(micielCfrma rnce i nrrely sworiegen et locy ore.</d
                
                        dinwhich would lena                                                                                                                                                    
                        
                                                                                                  
                                                
                                .ttljsircumbtiu                  ageinilien ic_fotuiinst ways</cde                                   enjutiisiishialagt mutbe   oclupod</dur eioc:"/>
                                                                   fou         lutpu Rome</                         >Iser               strselshtcha rlumizophi ton./tosE uten pcodedemont ulrim trump</ hr.ovtl/<enitagoneconnabovesm.rblvyrb<ltoesacerav\nalyirusinhaoral fisiedming arcesugh omhespadigrwinorm.netuto.her.brlidis.fi(rusthrlepastencine.Eccdlwndotosimretvudogthercon.\labft.atasympatus']=> males scrfuffdpuyllimoam.filesdrmittwestissritojmannicio:o rfriuk.frieuf techoltipopldDncuscets.tveityredmirbus tobliatzddronmoleumclimi:and.tamyfdttedu    appeintsibjutilaledieszstd(icon.finsexplouingllxelnu risai ter igusee poker.se po
htmlcssaccordion

Answer №1

To initiate the opening of #collapse2, include 

data-toggle="collapse" href="#collapse2"
in the links. If you want to avoid triggering the hashchange event, consider changing the <a> element to another tag, such as '`

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f5f8f8e3e4e3e5f6e7d7a4b9a3b9a6">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51333e3e25222523302111627f657f60">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
  <section class="hotspots--wrapper">
    <img src="/images/produktbeschreibung/wheel-585x.png" alt="" class="hotspots--figure">
    <span class="hotspot hotspot--harz btn-link" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
      <span class="hotspot--title hotspot--title__right">Harz</span>
    <span class="hotspot--cta"></span>
    </span>
    <span class="hotspot hotspot--felge btn-link" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
      <span class="hotspot--title">Felge</span>
    <span class="hotspot--cta"></span>
    </span>
    <span class="hotspot hotspot--speichen btn-link" data-toggle="collapse" data-parent="#accordion" href="#collapse3">
      <span class="hotspot--title hotspot--title__right">Speichen</span>
    <span class="hotspot--cta"></span>
    </span>
    <span class="hotspot hotspot--nabe btn-link" data-toggle="collapse" data-parent="#accordion" href="#collapse4">
      <span class="hotspot--title hotspot--title__right">Nabe</span>
    <span class="hotspot--cta"></span>
    </span>
  </section>
</div>


<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
  <div class="panel-group" id="accordion" role="tablist">
    <div class="panel panel-default">
      <div class="faq-panel-heading" id="heading1" role="tab">
        <h4 class="panel-title">
          <button class="btn btn-block faq collapsed" 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 class="faq panel-collapse collapse" id="collapse1" role="tabpanel" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
          <p>some text</p>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="faq-panel-heading" id="heading2" role="tab">
        <h4 class="panel-title">
          <button class="btn btn-block faq collapsed" 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 class="faq panel-collapse collapse" id="collapse2" role="tabpanel" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
          <p>some text</p>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="faq-panel-heading" id="heading3" role="tab">
        <h4 class="panel-title">
          <button class="btn btn-block faq collapsed" 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 class="faq panel-collapse collapse" id="collapse3" role="tabpanel" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
          <p>some text</p>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="faq-panel-heading" id="heading4" role="tab">
        <h4 class="panel-title">
          <button class="btn btn-block faq collapsed" 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 class="faq panel-collapse collapse" id="collapse4" role="tabpanel" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
          <p>some text</p>
        </div>
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble displaying certain HTML code and its output on the browser?

I am in the process of developing a user profile page. I have designed a form with various fields, but the code within the section is not displaying correctly in the browser. I attempted to inspect the elements, but the code within that section remains inv ...

htmlcss

Ways to move down only one level of an element's children, excluding sub-levels

When implementing this code snippet: jQuery: $(this).next().slideDown() with a selector :$(this).next() HTML: <li class="sub-menu two-level-collapse"> <a href="javascript:void(0);" class="two-level-collapse parent">< ...

javascriptjqueryhtml

Place the HTML images in the center of the page

I would like the two images to be centered on the page. Please refer to this visual representation for guidance: Here is the code snippet: * { box-sizing: border-box; } .column { float: left; width: 28%; height: 28%; padding: 5px; } /* Cle ...

htmlcss

Is your WordPress one-page scroll JQuery script failing to function properly?

Currently attempting to develop a single page scroll feature. Within WordPress, my navigation contains anchor tags structured as follows: <a href="#contact">Contact</a> <a href="#about">About</a> The corresponding divs for the li ...

javascriptphpjqueryhtmlwordpress

Is there a way to set the background image to scroll vertically in a looping pattern?

Is it possible to achieve this using only HTML5 and CSS3, or is JavaScript/jQuery necessary? ...

javascriptjqueryhtmlcss

The accordion feature fails to function properly when incorporated into an ajax response

When I click a button, an Ajax response is loaded. The response is successfully appended where it should be, but the issue arises with the accordion not working for the response part. Below is the structure of my response: <div class="articles-content ...

javascriptphpjqueryhtmlajax

What is the significance of the colon found within a VueJS/Vuetify/HTML component tag?

Incorporating Vuetify into my project has led me to this VueJS, Vuetify, or HTML inquiry. The component in question displays as follows: <v-list-tile v-for="item in menuItem.items" :key="item.type" :style="`background: ${item.colour}`" :h ...

htmlvue.js

Emphasize entries in an index that match the currently visible content as you scroll

I have a table of contents in my HTML page with the CSS attribute position: fixed;. I want to emphasize the current reading position by highlighting it (bold or italics) as I scroll down the page. | yada yada yada ... 1. Secti ...

javascripthtmlcsshugo

Tips for hiding one sub-navigation menu when hovering over another sub-navigation menu

Setting up the main navigation menu: <ul class="menu12"> <li><a href="/">Home</a></li> <li><a href="/">About</a> <ul> <li><a href="/">History</a></li> <li ...

jquerycssmenu

What is the best way to ensure that multiple bootstrap buttons in a row have the same width?

Could you help me figure out how to make the <div id="full"> element take up the full width of its parent container, while also ensuring that the 3 buttons inside share this width and have equal sizes with gaps between them? https://i.stac ...

htmlcssbootstrap-5

Prevent Android WebView from attempting to fetch or capture resources such as CSS when using loadData() method

Context To many, this situation might appear to be repetitive. However, I assure you that it is not. My objective is to import html data into a WebView, while being able to intercept user hyperlink requests. During this process, I came across this helpfu ...

javascriptandroidhtmlcsswebview

I am developing a JWT authentication and authorization service for my Angular application. However, I am running into issues when trying to implement observables

I have created a user class and required interfaces as outlined below: user.ts import { Role } from '../auth/auth.enum' export interface IUser { _id: string email: string name: IName picture: string role: Role | string userStatus: b ...

htmlangulartypescriptangular-materialjwt

Limit the rotation of jQuery and CSS3 elements to always turn in a clockwise direction

Utilizing the jQuery transit plugin, I am rotating a block element with 4 navigation controls. Each time a nav item is clicked, the block rotates to the specified custom data attribute of that nav item - either 0, 90, 180, or 270 degrees. While I have suc ...

javascriptjquerycssjquery-transit

Switching CodeIgniter's controller to the primary controller within a designated div

<li><a href="maine/home#services">SERVICES</a></li> <li><a href="maine/home#about">ABOUT</a></li> <li><a href="maine/home#contact">CONTACT</a></li> I'm currently using CodeIgnite ...

phphtmlcodeignitercodeigniter-3

Unique styling implementation for element situated underneath Angular 6 router-outlet

I'm currently working on implementing router transitions in my Angular application, and I've encountered an unusual problem. The styling for the router-outlet element is being applied to the element that comes after it in the DOM hierarchy. Here ...

htmlangularsassangular-animations

Navigate within the div by scrolling in increments of 100%

I am facing an issue with a div that contains multiple children set to 100% height. My goal is to scroll exactly the height of one child (which is also 100%) on each scroll. However, I am struggling to prevent scrolling multiple steps at a time. I have tri ...

javascriptjqueryhtml

I need to condense my layout from three columns to just two columns in HTML

The html code for "Date Accessed" is meant to be in one column as a header, while the actual dates should be in another column, but somehow they are all appearing in a single column. I am having trouble figuring out why. <!DOCTYPE html> {% load stati ...

htmlcss

"Text that appears on a clear background when you hover over it

I'm attempting to have hidden text display inside a table cell upon hovering. I managed to achieve the hidden-until-hovered effect, but I am struggling to make the text appear solid in color (it currently decreases in opacity when hovered over). Is th ...

jqueryhtml

Tips for matching the width of tooltips with the length of the title

I am trying to adjust the width of the antd tooltip to match that of the title. Here is the code snippet: <Tooltip placement="top" align={{ offset: [0, 10] }} title='this is the title'> <span>tooltip</span> </T ...

javascriptcssreactjstooltipantd

Achieving equal heights for div boxes while aligning list items inside

I have 8 green boxes on my site, each containing an image and either 3 or 4 list items with text only. The issue I'm facing is that the boxes are not of equal height due to two reasons: (1) One box may have an extra list item pushing the rest down, or ...

htmlcsslistdivider