Is it possible to toggle the selected state of button to de-selected on clicking again? (Change colour) using css

[Dilip_Adiga]

Hi guys,

I am using custom CSS on choice component where I have made it look like a button.

In Choice component when I click the option again it deselects itself meaning selection state toggles bu changing colour.

I want to be able to do the same with button as well, When I click again button should change colour to de selected state

Chat GPT says I will need to use JS to make this happen. But I cant use it as Glide allows only CSS code in css component

This is my CSS code

/* Center the container horizontally on all screen sizes */
.container {
  display: flex;
  justify-content: center; /* Center the entire container horizontally */
  padding: 0;
  height: 100vh; /* Full height of the viewport */
  box-sizing: border-box; /* Include padding and border in element's total width and height */
  width: 100%;
}

/* Task priority view styling */
.taskpriority-view {
  display: flex;
  justify-content: center; /* Center the items horizontally */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  list-style: none;
  padding: 0;
  margin: 0 auto; /* Center the entire task priority view horizontally */
  max-width: 1200px; /* Optionally limit the max width for larger screens */
  width: 100%;
}

/* Styling for each list item */
.taskpriority-view li {
  border-radius: 10px;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: none;
  background-color: #d6dbe0; /* Light gray color for deselected state */
  color: #314664; /* Dark blue-gray for text color */
  width: calc(33.33% - 20px); /* Adjust the width for 3 buttons per row */
  margin: 10px; /* Provide equal margin around the items */
  padding: 15px; /* Maintain padding for buttons */
  cursor: pointer; /* Make the list items look clickable */
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for background and color */
}

/* Style for the last item in the row */
.taskpriority-view li:last-child {
  margin-right: 0;
}

/* Style for selected items */
.taskpriority-view li.selected,
.taskpriority-view:not(:has(.selected)) li:first-child {
  font-weight: 900;
  border-radius: 10px;
  background-color: #1A3665; /* Dark blue color for selected button */
  color: white;
}

/* Media query for tablets and smaller screens */
@media (max-width: 768px) {
  .taskpriority-view li {
    width: calc(50% - 20px); /* Adjust width for 2 buttons per row on smaller screens */
  }
}

/* Media query for phones */
@media (max-width: 480px) {
  .taskpriority-view li {
    width: calc(100% - 20px); /* Full width button on phones */
    margin-right: 0;
  }
}

Can you guys help me with how I can get the output?

Thank you in advance.

Regards,
Dilip

[Eric_Penn]

I’d recommend checking out the CSS Library

There are a bunch of useful codes

[Dilip_Adiga]

Thank you for sharing this @Eric_Penn . I checked it before posting it.

unfortunately it doesn’t have and Chat GPT says I need to use JS code in combination with CSS to make it work.

Not sure that can be done as glide just allows CSS in the block.

Regards,
Dilip

[Eric_Penn]

The way we usually work around the button selected color is by adding a duplicate button block with the opposite accent colors and then applying opposite visibility settings to each button block.

I hope that makes sense

You can’t use JS in the CSS window

[Eric_Penn]

Here I applied some code from the library to make a choice component work like a button/ selector

[Dilip_Adiga]

Hi @Eric_Penn thank you for sharing your idea.

While for now I kind of liked your logic of hiding and un hiding the choice component to show de selected state

I got to make it work.

Wondering wether there is some CSS which allows us to de-select without having to use multiple components.

@Eric_Penn

Here I applied some code from the library to make a choice component work like a button

I got CSS to get my button component using the example from the library

Thank you for your help and reply.

Regards,
Dilip

[Eric_Penn]

@Dilip_Adiga

Wondering wether there is some CSS which allows us to de-select without having to use multiple components.

I don’t believe there is a way. If it were me I’d copy that button three times and give it three different class names and three different visibility settings

Someone may have a better solution.

[Himaladin]

Toggle buttons are not supported by Glide, but you can achieve this by creating two buttons for the two different states, with opposite visibility settings.
This might be the same as what Eric mentioned.

[Dilip_Adiga]

Hi Himaldin,

Thank you for replying.I applied Method suggested by @Eric_Penn and it works for now.

Since both are pointing to same column in the table as value I write to it gives error in the Element.

hope that is ok.

Regards,
Dilip

[Eric_Penn]

@Dilip_Adiga

Since both are pointing to same column in the table as value I write to it gives error in the Element.

You can ignore the error… it’s just a warning

[Dilip_Adiga]

Thank you for your reply @Eric_Penn

Regards,
Dilip