Collapsible div to show by default

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Collapsible div to show by default

maury844 asked 7 years ago

"If you’ve set the collapsible element to be open by default using the in class, set aria-expanded="true" on the control instead." - Basic Collapse Tutorial

I'm trying to do two simple menus, one should be displayed (expanded) by default and they should collapse when the other one is expanded. From the documentation I found that I should add the 'in' class, but I can't figure out what does that mean exactly, I've tried adding  class="in" to my container div with no luck, also I'm assuming that the "isCollapsed" in the code snippet

' [mdbCollapse]="isCollapsed" '

is a boolean that I need to add to my component.ts but that's not specified in the code snippet.

Any help would be much appreciated.

Thank you.

Damian Gemza staff answered 7 years ago

Dear Maury844, Please try code below. There's two collapse buttons, first collapse is opened in ngAfterViewInit(), and after clicking in second, first one is closed, and in reverse. Let me know if this is your expected behavior. .html: 
<button class="btn btn-primary waves-light" type="button" (click)="toggleButton()" mdbRippleRadius>

Toggle collapse

</button>

<div class="" [mdbCollapse]="isCollapsed" #test="bs-collapse">

<divclass="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>

<button class="btn btn-primary waves-light" type="button" (click)="toggleButton()" mdbRippleRadius>

Toggle collapse

</button>

<div class="" [mdbCollapse]="isCollapsed" #test2="bs-collapse">

<divclass="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>
.ts: 
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent implements AfterViewInit {

firstOpened:boolean=true;

@ViewChild('test') test: any;

@ViewChild('test2') test2: any;

toggleButton() {

if (this.firstOpened) {

this.test.hide();

this.test2.show();

this.firstOpened=false;

} else {

this.test2.hide();

this.test.show();

this.firstOpened=true;

}

}

ngAfterViewInit() {

this.test.show();

}

}
Best Regards, Damian

maury844 commented 7 years ago

Thank you @Damian, I was missing the ngAfterViewInit() part... also I still have the question, what is "isCollapsed" referring to? when I tried your code I got that highlighted saying "Identifier 'isCollapsed' is not defined. The component declaration, template variable declarations, and element references do not contain such a member".

Damian Gemza staff commented 7 years ago

isCollapsed is field used in mdbCollapse directive. This field is responsible for checking, if text is collapsed or not. You don't have to use it in your .ts component, just leave it in your .html code as in example. Best Regards, Damian
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
maury844
10Support score
2Questions 1Answers
0Snippets likes 0Snippets