Tips for incorporating drop-down arrow states into a Bootstrap 4 accordion with Angular or CSS

Question

Tips for incorporating drop-down arrow states into a Bootstrap 4 accordion with Angular or CSS

Is there a simple way to implement an arrow (>) to show the

aria-expanded="true" or aria-expanded="false"

states in the Bootstrap 4 accordion using either Angular2 or plain CSS?

I have gone through several tutorials and attempted numerous methods, but it seems like I am missing something.

I've experimented with just CSS, but the arrow doesn't appear (although this approach might be correct):

.card .card-header:after{
    float: right;
    border: 2px solid #f07f09;
    border-width: 0 3px 3px 0;
    padding: 6px;
    margin-right: 10px;
}

I also tried using ngClass, but my problem is that it applies the arrow state to all elements with the code below (is there a way to incorporate the index for this to work?):

<i [ngClass]="{'right':!expanded, 'down':expanded}"></i>

and the function setting the state:

(click)="changeDropdownArrowState()"

Function in my component:

  changeDropdownArrowState () {
    this.expanded = !this.expanded;
  }

My HTML:

<div class="card">
    <div class="card-header" id="headingOne">
        <h2 class="mb-0">
            <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse"
                data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" (click)="changeDropdownArrowState()">
                <h1>Personal Details
                    <i [ngClass]="{'right':!expanded, 'down':expanded}"></i>
                </h1>
            </button>
        </h2>

    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#retailCliamAccordian">
        <div class="card-body">
            some text
        </div>
    </div>
</div>
<div class="card">
    <div class="card-header" id="headingTwo">
        <h2 class="mb-0">
            <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse"
                data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" (click)="changeDropdownArrowState()">
                <h1>Product Details
                    <i [ngClass]="{'right':!expanded, 'down':expanded}"></i>
                </h1>
            </button>
        </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#retailCliamAccordian">
        <div class="card-body">
            other text
        </div>
    </div>
</div>

My CSS:

i {
    float: right;
    border: 2px solid #f07f09;
    border-width: 0 3px 3px 0;
    padding: 6px;
    margin-right: 10px;
}

.right {
    transform: rotate(-45deg);
}

.down {
    transform: rotate(45deg);
}

https://i.sstatic.net/CrDF8.png

Another possible solution could involve utilizing the aria-expanded="true/false" attribute.

css angular bootstrap-4

Answer 1

Answer №1

If you'd like a simple solution, you can define an array of true/false values in your .ts file as follows:

expandableAreasState = [true, false, false, ...] // the first item will be expanded by default in this example

You can then modify the method like so:

  changeDropdownArrowState(index: number) {
    this.expandableAreasState[index] = !this.expandableAreasState[index];
  }

When calling inside the template, use it like this:

<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse"
            data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" (click)="changeDropdownArrowState(0)"> // use 1 instead of 0 for the next one and so on...
     <h1>Product Details
          <i [ngClass]="{'right':!expandableAreasState[0], 'down':expandableAreasState[0]}"></i>
     </h1>
</button>

Alternatively, you might find ng-bootstrap to be a better fit for your needs as it simplifies bootstrap implementation without jQuery dependencies.

If your cards are similar and not too complex, consider creating an interface:

CardConfig {
  title: string;
  text: string;
  ...
}

Define an array of these card settings in a util or config file:

export const cardConfiguration: CardConfig[] = [{title: ''Personal details, text: 'some text', ...}]

Import this configuration in your component.ts file:

cardConfig = cardConfiguration

Then, utilize *ngFor to loop over them in the template.

Answer 2

If you'd like a simple solution, you can define an array of true/false values in your .ts file as follows:

expandableAreasState = [true, false, false, ...] // the first item will be expanded by default in this example

You can then modify the method like so:

  changeDropdownArrowState(index: number) {
    this.expandableAreasState[index] = !this.expandableAreasState[index];
  }

When calling inside the template, use it like this:

<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse"
            data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" (click)="changeDropdownArrowState(0)"> // use 1 instead of 0 for the next one and so on...
     <h1>Product Details
          <i [ngClass]="{'right':!expandableAreasState[0], 'down':expandableAreasState[0]}"></i>
     </h1>
</button>

Alternatively, you might find ng-bootstrap to be a better fit for your needs as it simplifies bootstrap implementation without jQuery dependencies.

If your cards are similar and not too complex, consider creating an interface:

CardConfig {
  title: string;
  text: string;
  ...
}

Define an array of these card settings in a util or config file:

export const cardConfiguration: CardConfig[] = [{title: ''Personal details, text: 'some text', ...}]

Import this configuration in your component.ts file:

cardConfig = cardConfiguration

Then, utilize *ngFor to loop over them in the template.

Tips for incorporating drop-down arrow states into a Bootstrap 4 accordion with Angular or CSS

Answer №1

Similar questions

Requests from a Heroku Angular frontend to a Heroku Spring Boot backend result in a 403 error code being returned

Activate a function in components upon the refresh of a service value (Angular 6)

conditional operator that compares values in router events

What is the correct method for caching fonts within an Angular application?

I tried to import Bootstrap into my project, but it seems to be malfunctioning

Guide to inserting a glyphicon within a bootstrap badge

Load all HTML content from external files using a Bootstrap modal

Using JavaScript to create CSS animations triggered on hover

having trouble generating a vertical advertisement banner on wordpress

Launch a modal from a separate webpage

Is there a way to modify the Firebase DB without relying on push keys?

Adjusting the height of a CSS div to be 0 while also modifying the

Guide to building interactive dropdown menus in Angular 8

Using an array to enforce form validation rules in Angular, including prohibited form values

Navigation bar links refusing to decrease in size

Retrieve the text content of the paragraph element when its parent is clicked. The paragraph element belongs to a group that contains many

"Utilize Ionic to subscribe the back button and close an internal div with ease

Angular toolbar permanently positioned at the top of the screen

Adding an additional border when combining two divs with rounded borders

How to incorporate a <select> field in Django templates with personalized Bootstrap designs