Collapsed card on click

Question

I have problem with collapsed card on Angular. I have component import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-numbered-card',
  templateUrl: './numbered-card.component.html',
  styleUrls: ['./numbered-card.component.scss']
})
export class NumberedCardComponent implements OnInit {
  @Input() color: string;
  @Input() text: string;
  @Input() title: string;
  @Input() number: string;
  constructor() { }

  ngOnInit() {
  }

}

<div class="info-container" [ngStyle]="{'background-color': color}">
  <div class="ib-header">
    <span class="ib-index vertical-center">
      {{number}}
    </span>
    <div class="ib-title vertical-center">{{title}}
    </div>
  </div>

</div> <a href="" class="info-box-more-details">Read more</a>

My scss file

.info-container {
    width: 250px;
    border-radius: 4px;
}
.ib-index {
    color: white;
    opacity: 0.25;
    font-size: 140px;
    font-weight: 900;
    padding-left: 5px !important;
    position: absolute;
    margin-top: -20px;
}

.ib-header {
    height: 130px;
}

.ib-title {
    color: white;
    height: 130px;
    font-size: 24px;
    font-weight: 600;
}

.ib-paragraph {
    font-size: 16px !important;
    color: white !important;
    height: inherit;
    padding-bottom: 10px;
}

.info-box-more-details {
    height: 25px !important;
    background-color: #DA3D06;
    color: white;
    height: inherit;
    width: 120px;
    position: absolute;
    right: 20px;
    bottom: 5px;
    padding: 5px;
    z-index:20;
}

.vertical-center {
    display: flex;
    align-items: center;
    flex-direction: column;
    /* make main axis vertical */
    justify-content: center;
    /* center items vertically, in this case */
}

Currently it look like this:

I would like it to look like this:

When I click the red button, I would like this box to expand and show the text, after re-clicking it collapsed. It is expanded box:

Do you have any idea?

Jens Alenius Jens Alenius · Accepted Answer · 2019-08-22T11:55:08

You dont need angular material to make a card expand/collapse. 1. Your css is probably not setup correct 2. Don’t use an anchor as the toogle button because an anchor is for navigation. Instead use a button with a (click)=‘toggle()’. Then add a *ngIf=‘iscollapsed’ for the more info area.

Collapsed card on click

1 Answers