show and hide div on button click code example
Example 1: html button that hide and show
<button onclick="toggleText()">button</button>
<p id="Myid">Text</p>
<script>
function toggleText(){
var x = document.getElementById("Myid");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Example 2: in angular click button button hide div and show div
<div *ngIf="div1">
ABC
</div>
<div *ngIf="div2">
DEF
</div>
<div *ngIf="div3">
GHI
</div>
<button (click)="div1Function()"></button>
<button (click)="div2Function()"></button>
<button (click)="div3Function()"></button>
in .ts file
div1:boolean=true;
div2:boolean=true;
div3:boolean=true;
div1Function(){
this.div1=true;
this.div2=false;
this.div3=false
}
div2Function(){
this.div2=true;
this.div1=false;
this.div3=false
}
div3Function(){
this.div3=true;
this.div2=false;
this.div1=false
}