title: collapse buttom for specific id bootstrap 3 on angular 6
body: <p>I'm trying to show a specific text using a collapse button in bootstrap 3 and angular 6 (according to these instructions - <a href="https://valor-software.com/ngx-bootstrap/#/collapse#accessibility" rel="nofollow noreferrer">https://valor-software.com/ngx-bootstrap/#/collapse#accessibility</a>).</p>
  
  <p>The code I'm using is this:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary" (click)="collapse.show()"
          aria-controls="collapseManual1"&gt;Show content
  &lt;/button&gt;
  
  &lt;hr&gt;
  &lt;div id="collapseManual1" #collapse="bs-collapse" [collapse]="!isOpen"
       class="card card-block card-header"&gt;
    &lt;div class="well well-lg"&gt;Some content1&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="collapseManual2" #collapse="bs-collapse" [collapse]="!isOpen"
       class="card card-block card-header"&gt;
    &lt;div class="well well-lg"&gt;Some content2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I wrote it to see if I can somehow collapse the first div but it doesn't work, the code only collapse the second div. aria-controls doesn't effect anything. It seems that the last element that has #collapse="bs-collapse" is what get shown. </p>
  
  <p>I also tried to add data-target: </p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary" (click)="collapse.show()" data-target="#collapseManual1" aria-controls="collapseManual1"&gt;Show content
  &lt;/button&gt;
  </code></pre>
  
  <p>and href:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary" (click)="collapse.show()" href="#collapseManual1" aria-controls="collapseManual1"&gt;Show content
  &lt;/button&gt;
  </code></pre>
  
  <p>But results were the same.</p>
  
  <p>How can I make the collapse.show() to work on a specific id?</p>