Menu
I've been doing a lot of research on this and can't find a good solution. Basically, I have a panel in my app (Panel 2) and would like to collapse it to the left when the button is clicked and if the button gets clicked again then expand it to the right.
Here's my working Code: PLUNKER
<div fxFlex fxLayout="row" fxLayoutAlign="space-between stretch" style="background-color:green;">
<div fxFlex [fxShow]="explorerShow" style="background-color:white;">
<div (click)="toggleDirection()" > <img src="../../../assets/images/button1.png" alt="Button" style = 'float: right'>
</div>
Panel 2
</div>
415
Enables you to expand or collapse a section that contains a number of views. A collapsible panel can contain other views, such as text boxes or other collapsible panels.
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.
To create an accordion that is collapsed by default, we need to set the 'active' property of the jQuery Accordion as false. Syntax: $("#demoAccordion"). accordion({ collapsible: true, active: false});
Use fxHide and [fxShow]="expand" on Panel 2 element
<div class="container">
<div class="content" fxLayout="row" fxFlexFill>
<div class="sec1" fxFlex="20%" fxHide [fxShow]="expand">
SIDEBAR
</div>
<div class="sec2" fxFlex="100%">
BODY
</div>
</div>
<button (click)="expand = !expand">Toggle Sidebar</button>
</div>
Here is a working stackblitz | your plunkr
UPDATE: Here is a stackblitz with animation
125
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
