function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Amy JAmy J 

Hide and show text on a single button click

Hi,
I have requirement, when I ckick a button text shoud come and when I ckick the same button the text shoud hide. I'm not able to hide on the same button click. Please assist. Below is my code.  
html-
    <lightning-button  label={ShowText}  title="Show text" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
    <div style=" margin-top: -30%; left: 550%; margin-left: -30px; background: linear-gradient(#fff, #dbe4eb); border-color:#555 transparent transparent transparent;color: #111; border: 1px solid black;" if:true={showText1}>{textValue}</div>

JS-

  @track ShowText='Show text'
  @track showText1 = false;
   textValue = 'Some text value';
   handleClick(event){
    const label=event.target.label;
  if(label==='Show text'){
    this.Showtext='Hide text';
    this.showText1 = true;

  }else if(label==='Hide text'){
    this.Showtext='Show text';
    this.showText1 = false;
  }
     
      
   }

 
Best Answer chosen by Amy J
TobyKutlerTobyKutler
Change the JS file to this :  
import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    showText = false;
    textValue = 'Some text value';
    handleClick(event){
        this.showText =  this.showText == true ? false : true ;
    }

}

All Answers

AnkaiahAnkaiah (Salesforce Developers) 
Hi amy,

try with below.
html 
<template>
    <lightning-button label="Show Text" title="Show text" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
    <div if:true={showText}>{textValue}</div>
</template>

Js: 
import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    showText = false;
    textValue = 'Some text value';
    handleClick(event){
        this.showText = true;
    }

}

If this helps, Please mark it as best answer.

Thanks!!​​​​​​​​​​​​​​
Amy JAmy J
Hi Ankaiah,
Thank you for your reply. I tried above code but its not getting false. It's getting true on the first click but not getting false on the second click which is my requirement. It should get true on the first click and false on the second click on the same button and so on. Plese let me know if you have any other workaroud.
TobyKutlerTobyKutler
Change the JS file to this :  
import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
    showText = false;
    textValue = 'Some text value';
    handleClick(event){
        this.showText =  this.showText == true ? false : true ;
    }

}
This was selected as the best answer
Amy JAmy J
Thank you so much.