Collapsible div to show by default

Topic: Collapsible div to show by default

maury844 free asked 6 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.

Add comment

Damian Gemza staff answered 6 years ago

1 0 Best answer

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:
<div>
<pre><button class="btn btn-primary waves-light" type="button" (click)="toggleButton()" mdbRippleRadius>

Toggle collapse

</button>

<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>

Toggle collapse

</button>

<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></pre>
</div>
.ts:
<div>
<pre>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();

}

}</pre>
</div>
Best Regards,

Damian

Please insert min. 20 characters.

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 free commented 6 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 6 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

maury844

10Support score
2Questions 1Answers 0Snippets