Is it possible to only use CSS to hide/show events in Salesforce B2C Commerce Cloud

Question

I am a Salesforce Commerce Cloud practitioner. Here I am trying to create a anchor tag which when clicked hide/show certain part of the page.

For example:- If we want to show/hide the enter promo code element with a hyper-link in the cart section.

I would appreciate any someone can provide the solution or any material for reference.

Dated:-19-10-2022 I tried to achieve to goal firstly by using javascript. I which i am getting problem. I am able to make a click me button but i think there is some problem with the connection between button and js script.

Code:-

Screen View:-

Answer 1

There is no particular thing to do that. You can do it with standard Javascript.

Also, SFRA uses bootstrap 4 and you can do it with Bootstrap Collapse.

https://getbootstrap.com/docs/4.0/components/collapse/

Answer 2

The root cause by the code js is not correct. Please try again with the code below:

function myFunction() {
var x = document.getElementsByClassName("col-sm-5 col-md-4 totals");
if (x[0].style.display === "none") {
    x[0].style.display = "block";
} else {
    x[0].style.display = "none";
}
}