I am hoping for the bootstrap collapse feature to automatically close one section when another is expanded

Question

I am hoping for the bootstrap collapse feature to automatically close one section when another is expanded

I tested this code and it worked for me, but when I try to use it in Angular, I encounter an error in jQuery stating that "collapse tag is not found in jQuery". Can anyone assist me in resolving this issue?

$('.button-click').click( function(e) {
    $('.collapse').collapse('hide');
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>



  <a class="btn btn-primary button-click" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
 
   <a class="btn btn-primary button-click" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

<div class="collapse" id="collapseExample2">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

html jquery css angular twitter-bootstrap

Answer 1

Answer №1

Using Angular along with Bootstrap is recommended over using jQuery with Angular, as it helps avoid potential issues. Consider utilizing Angular powered Bootstrap frameworks like ng-bootstrap.

Note: With the upcoming Bootstrap 5, jQuery support will no longer be included.

When integrating Angular powered Bootstrap using ng-bootstrap, you have two choices:

Implement ng-bootstrap's collapse feature, demonstrated in this stackblitz example:

<button type="button" class="btn btn-primary" [class.active]="!isCollapsed" (click)="isCollapsed2 = true; isCollapsed = !isCollapsed"
          [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
  Link with href
</button>
 
<div id="collapseExample" [ngbCollapse]="isCollapsed">
  <div class="card card-body">
    1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

<div id="collapseExample2" [ngbCollapse]="isCollapsed2">
  <div class="card card-body">
    2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Alternatively, you can create custom Angular methods to replace jQuery's $('.collapse').collapse('hide'); functionality, as shown in this stackblitz example.

public isCollapsed = [false, true];
resetAllCollapsedAndToggleCurrent (index) {
  this.isCollapsed.forEach((item, collapseIndex) => {
    if (index === collapseIndex) {
      this.isCollapsed[index] = !this.isCollapsed[index];
    } else {
      this.isCollapsed[collapseIndex] = true;
    }
  })
}

... with corresponding HTML:

<button type="button" class="btn btn-primary" [class.active]="!isCollapsed[0]" (click)="resetAllCollapsedAndToggleCurrent(0)"
          [attr.aria-expanded]="!isCollapsed[0]" aria-controls="collapseExample">
  Link with href
</button>

<div id="collapseExample" [ngbCollapse]="isCollapsed[0]">
  <div class="card card-body">
    1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

A similar behavior to collapsing elements is achieved with tabset pills, which you can easily adapt for your project using this stackblitz example:

<ngb-tabset type="pills">
  <ngb-tab title="Link with href">
    <ng-template ngbTabContent>
      <p>1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Link with href">
    <ng-template ngbTabContent>
      <p>2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

Best of luck with your Angular projects!

Answer 2

Using Angular along with Bootstrap is recommended over using jQuery with Angular, as it helps avoid potential issues. Consider utilizing Angular powered Bootstrap frameworks like ng-bootstrap.

Note: With the upcoming Bootstrap 5, jQuery support will no longer be included.

When integrating Angular powered Bootstrap using ng-bootstrap, you have two choices:

Implement ng-bootstrap's collapse feature, demonstrated in this stackblitz example:

<button type="button" class="btn btn-primary" [class.active]="!isCollapsed" (click)="isCollapsed2 = true; isCollapsed = !isCollapsed"
          [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
  Link with href
</button>
 
<div id="collapseExample" [ngbCollapse]="isCollapsed">
  <div class="card card-body">
    1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

<div id="collapseExample2" [ngbCollapse]="isCollapsed2">
  <div class="card card-body">
    2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Alternatively, you can create custom Angular methods to replace jQuery's $('.collapse').collapse('hide'); functionality, as shown in this stackblitz example.

public isCollapsed = [false, true];
resetAllCollapsedAndToggleCurrent (index) {
  this.isCollapsed.forEach((item, collapseIndex) => {
    if (index === collapseIndex) {
      this.isCollapsed[index] = !this.isCollapsed[index];
    } else {
      this.isCollapsed[collapseIndex] = true;
    }
  })
}

... with corresponding HTML:

<button type="button" class="btn btn-primary" [class.active]="!isCollapsed[0]" (click)="resetAllCollapsedAndToggleCurrent(0)"
          [attr.aria-expanded]="!isCollapsed[0]" aria-controls="collapseExample">
  Link with href
</button>

<div id="collapseExample" [ngbCollapse]="isCollapsed[0]">
  <div class="card card-body">
    1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

A similar behavior to collapsing elements is achieved with tabset pills, which you can easily adapt for your project using this stackblitz example:

<ngb-tabset type="pills">
  <ngb-tab title="Link with href">
    <ng-template ngbTabContent>
      <p>1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Link with href">
    <ng-template ngbTabContent>
      <p>2 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

Best of luck with your Angular projects!

I am hoping for the bootstrap collapse feature to automatically close one section when another is expanded

Answer №1

Similar questions

Angular 9: Implementing a synchronous *ngFor loop within the HTML page

What role do colors and tables play in Javascript?

My jquery filter is not functioning properly

Converting jQuery ajax success response data into a PHP variable: A step-by-step guide

The alignment of vertical text can impact the positioning of surrounding text

What is the best way to choose all <pre> tags that have just one line of content?

Tips for clearing out text in a <p> tag with javascript when it exceeds a specific length of 100 characters

The Angular service/value is failing to retrieve the updated variable from the $(document).ready() function

Tips on generating model names dynamically within a service

increase the selected date in an Angular datepicker by 10 days

Guide to centering the navigation bar within a container using Bootstrap 4

The floating property doesn't appear to function properly in Internet Explorer versions 6 through 8 when

Leveraging the array for fetching JSON data

Tips for Resolving This Issue: Dealing with Cross-Origin Read Blocking (CORB) Preventing Cross-Origin Response

I am seeking a way to access the child infoWindow within a Google Maps marker in Angular 5

Utilize Angular to Transfer HTTP Array Data from a Service to a Component

What is the standard error function used for jQuery promises?

Unseen related model fields

Unable to get 100% height to work properly in HTML5 ASP.net because of the DOCTYPE

Strategies for delaying the loading of CSS when importing