Expand Core

    
      
    

      
        Copy
      
      
    
  

    
      <p>
    Chapman: Mr Wentworth just told me to come in here and say that there was trouble at the mill, that's all - I didn't
    expect a kind of Spanish Inquisition.
</p>
<button
    tuiButton
    type="button"
    (click)="expanded = !expanded"
>
    Show/Hide
</button>
<tui-expand [expanded]="expanded">
    <p *tuiItem>NOBODY expects the Spanish Inquisition!</p>
</tui-expand>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <button
    tuiButton
    type="button"
    (click)="expanded = !expanded"
>
    Show/Hide
</button>
<tui-expand [expanded]="expanded">
    @for (_ of '-'.repeat(3); track $index) {
        <p>I am eagerly loaded but hidden</p>
    }
</tui-expand>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <button
    tuiButton
    type="button"
    (click)="expanded = !expanded"
>
    Show/Hide
</button>
<tui-expand [expanded]="expanded">
    <tui-elastic-container *tuiItem>
        @if (loading$ | async) {
            <tui-loader [style.margin.rem]="1" />
        } @else {
            <p>
                You can use
                <code>ElasticContainer</code>
                to animate height changes
            </p>
            <p>Just some more content</p>
            Making this section bigger than loader
        }
    </tui-elastic-container>
</tui-expand>

    

      
        Copy