function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Madhuri GowdaMadhuri Gowda 

how to change the color of a lightning card when clicked on it

Hello Everyone

Need Small Help

I am new to the slds, i am trying to display certain lightning cards, my Requirement is when i click on that card it should change the color
can anyone please suggest how can i do that

below is my code and snapshot

<aura:component >
 <a class="slds-badge__icon" href="javascript:void(0);">1BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Available</a>
<a class="slds-button slds-button_brand" href="javascript:void(0);">3BHK Available</a>
<a class="slds-button slds-button_outline-brand" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_destructive" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_text-destructive" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_success" href="javascript:void(0);">1BHK Blocked</a>
</aura:component>

User-added image
Best Answer chosen by Madhuri Gowda
Deepali KulshresthaDeepali Kulshrestha
Hi Manjunath,
I have tried your code in my org. You just need to add a CSS in your component stylesheet.
Please try the following code:
 
Component
---------------------------------
<aura:component>
  
 <a class="slds-badge__icon" href="javascript:void(0);">1BHK Available</a>
<a class="slds-button slds-button_neutral bttn" href="javascript:void(0);">2BHK Available</a>
<a class="slds-button slds-button_brand" href="javascript:void(0);">3BHK Available</a>
<a class="slds-button slds-button_outline-brand" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_destructive" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_text-destructive" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_success" href="javascript:void(0);">1BHK Blocked</a>

</aura:component>

Component stylesheet
--------------------------------------------
.THIS.slds-button:focus {
    box-shadow: 0 0 3px #0070d2;
    background: red !important;
}

You can change the color as per your requirement.

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha

All Answers

Deepali KulshresthaDeepali Kulshrestha
Hi Manjunath,
I have tried your code in my org. You just need to add a CSS in your component stylesheet.
Please try the following code:
 
Component
---------------------------------
<aura:component>
  
 <a class="slds-badge__icon" href="javascript:void(0);">1BHK Available</a>
<a class="slds-button slds-button_neutral bttn" href="javascript:void(0);">2BHK Available</a>
<a class="slds-button slds-button_brand" href="javascript:void(0);">3BHK Available</a>
<a class="slds-button slds-button_outline-brand" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_destructive" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_text-destructive" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_success" href="javascript:void(0);">1BHK Blocked</a>

</aura:component>

Component stylesheet
--------------------------------------------
.THIS.slds-button:focus {
    box-shadow: 0 0 3px #0070d2;
    background: red !important;
}

You can change the color as per your requirement.

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
This was selected as the best answer
Madhuri GowdaMadhuri Gowda
@Deepali

Thank you very much for the Tip, can i design a Lightning card where it shows as "Available" as Green and when i click on the card again it should show as  "Booked" and color should change as per the below snapshot


User-added image

 
Madhuri GowdaMadhuri Gowda
Hello all

i have already created a lightning component and app where 5 boxes are displayed, 
now my requirement is that whenever i click on one of those buttons, those buttons should turn to green and display a text called booked, the others should be in a green box as Available, i was advised by my seniors to use "Toogle function" to show/hide option, but i could not do it, i would really appreciate if anyone could help with this issue

below are the links which i am trying to implement to my lightning components

link 1 - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_text ( for changing the text )

link 2 - https://stackoverflow.com/questions/26937424/change-button-color-onclick (Changing the color when it is clicked on the button)
==========================================

MysldsApp.app -


<aura:application extends="force:slds">  
     <c:cmpsldsApp />  
</aura:application>
==========================================

cmpsldsApp.css -


.THIS.slds-button:focus {
    box-shadow: 0 0 3px #0070d2;
    background: Red !important;
}
.THIS.slds-button:focus {
    box-shadow: 0 0 3px #0000FF;
    background: blue !important;
}
==================================================

component -


<aura:component >
      <p>  Floor No 0 </p>
   
<a class="slds-button slds-button_neutral" href="javascript:void(0);">1BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Blocked</a>
   
   <p>  Floor No 1  </p>
   
<a class="slds-button slds-button_neutral" href="javascript:void(0);">1BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Blocked</a>
   
    <p>  Floor No 2  </p>
   
<a class="slds-button slds-button_neutral" href="javascript:void(0);">1BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Blocked</a>
   
    <p>  Floor No 3  </p>
   
<a class="slds-button slds-button_neutral" href="javascript:void(0);">1BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Available</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">1BHK Blocked</a>
<a class="slds-button slds-button_neutral" href="javascript:void(0);">2BHK Blocked</a>
   
</aura:component>

===================================================
controller

({
    handleClick : function (cmp, event, helper) {
        alert("The Booking Status has been Changed to: " + event.getSource().get("v.label"));
    }
});

User-added image