+ Start a Discussion
jatin parashar 11jatin parashar 11 

IN lightning web component when i click on a button whose variant is base then a outline of blue colour appear everytime. how i remove it??

User-added image
Best Answer chosen by jatin parashar 11
jatin parashar 11jatin parashar 11
http://sfdcmonkey.com/2017/06/02/collapsible-section-accordion-lightning-component/
this is the link which i want to do but it is in lightning but i want to do it in lwc and i dont want to use lightning button then how it will do

All Answers

Ahmed Ansari 13Ahmed Ansari 13

Hi Jatin Parashar 11,

You can use the button element with class="slds-button" only. i think it resolve your Issue

jatin parashar 11jatin parashar 11
thanks but it is not resolve my issue. the outline is coming here also.
<template>
    <div class="abc"> 
        <div class="slds-float--right "><lightning-button  label={clickedButtonLabel} title="Show" onclick={handleClick} icon-name={toggleIconName}  class="slds-m-bottom_medium slds-m-right_x-small"  ></lightning-button>  </div>
        <div class="slds-m-left--large">Add Refrigeration</div>
<template if:true={boolVisible}>  

    
    <div class=" slds-p-around--medium" >
    <ul class="horizantal-list">
      <li class="def">Door Heater</li>
      <li class="def1">ECM Motors</li>
  </ul>
  <ul class="horizantal-list">
          <li class="def">LED STICKS</li>
          <li class="def1">Night Covers</li>
      </ul>
      <ul class="horizantal-list">
              <li class="def">Vending Controls</li>
              
          </ul>
    </div>

</template>  
<button class="collapsible">Open Collapsible</button>
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
    </div>
</template>




------------------------------------------------------------------------------


import { LightningElement,track } from 'lwc';

export default class CollapseFile extends LightningElement {
    @track toggleIconName = 'utility:add';  
    @track boolVisible = false;  
  
    handleClick() {  
        // const label = event.target.label;  
  
        if ( this.toggleIconName === 'utility:add' ) {  
  
            this.toggleIconName = 'utility:dash';  
            this.boolVisible = true;  
  
        } else if  ( this.toggleIconName === 'utility:dash' ) {  
              
            this.toggleIconName = 'utility:add';  
            this.boolVisible = false;  
  
        }  
    }
    

}


 
jatin parashar 11jatin parashar 11
http://sfdcmonkey.com/2017/06/02/collapsible-section-accordion-lightning-component/
this is the link which i want to do but it is in lightning but i want to do it in lwc and i dont want to use lightning button then how it will do
This was selected as the best answer
jatin parashar 11jatin parashar 11
only part 1