I've been working on creating a toggle switch to swap out a section on a webpage with another div containing different content.
<!-- Toggle - Changes layout when clicked-->
<div class="content">
<p class="leftBox" >option 1</p>
<label class="switch" >
<input type="checkbox" (click)="toggle()" >
<span class="slider round" ></span>
</label>
<p class="rightBox" >option 2</p>
</div>
<div class="page1Text">
<!-- Page Content -->
</div>
<!-- Next Button -->
<div class="content">
<button type="button" class="mat-raised-button buttontxt" (click)="nextpage1()">Next</button>
</div>
</div>
<!-- Page Content 2 -->
<ng-container *ngIf="show">
<div class ="page2" >
<!-- Page Content -->
<div class= "content text-center">
<!-- Next Button - Link to either Growth or Mindset page, depending on toggle -->
<div class="content">
<button type="button" class="pam-button mat-raised-button buttontxt" (click)="nextpage2()">Next</button>
</div>
</div>
</ng-container>
And here's my TypeScript:
toggle(){
this.show = !this.show;
if(this.show)
this.switch = "Hide";
else
this.switch = "Show";
}
The second page content toggles effectively, but I'm struggling to figure out how to replace/hide the first page content using the same toggle switch and vice versa. Any suggestions would be appreciated!