Item is not display on click event-CodePudding

I want to display some info when I click on element, but for some reason class is not being applied when I click on the element.

Here is html:

<div >
                    <h3>1. Choose a room and date</h3>
                    <p >Contact us via phone or email, ask for availability of you choice of room. We might offer you something exciting.</p>
                    <svg  width="40" height="40" viewBox="0 0 40 40"  xmlns="http://www.w3.org/2000/svg">
                        <circle cx="20" cy="20" r="20" />
                        </svg>
                        <svg  width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16 1.5L9 8.5L2 1.5" " stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            
                </div>

JS:

const card=document.querySelector('.how-to-choose-card');
const details=document.querySelector('.on-click-details');

card.addEventListener('click',()=>{
    card.classList.toggle('add-height');
    details.classList.toggle('display-block');
})

CSS:

.add-height{
    height: 188px;
   
}

.display-block{
    display: block;
    transition: 1s ease-in;
}


.on-click-details{
    display: none;
width: 516px;
height: 54px;
margin-top: 45px;
margin-left: 8px;

font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 150%;
/* or 27px */


color: #848FAC;
}


.how-to-choose-card{
    cursor: pointer;
    position: relative;
    padding-left: 36px;
    margin-top: 200px;
width: 588px;
height: 100px;



background: #FFFFFF;
border-radius: 4px;

box-shadow: 0px 17px 42px rgb(0 0 0 / 12%);

transition: height .2s ease-in;
}

Can someone help me please. It works only if in JS I write:

card.addEventListener('click',()=>{
            card.classList.toggle('add-height');
            details.style.display="block";
        });

I don't know what am I doing wrong. Can someone help me please? I access elements by class. Isn't that correct? Should I access them by ID?

Here is the link tot codeopen:

const card = document.querySelector(".how-to-choose-card");
const details = document.querySelector(".on-click-details");

card.addEventListener("click", () => {
  card.classList.toggle("add-height");
  details.classList.toggle("display-block");
});

.on-click-details {
  width: 516px;
  height: 54px;
  margin-top: 45px;
  margin-left: 8px;
  margin-bottom: 0;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  /* or 27px */
  color: #848fac;
  height: 0;
  transition: height 0.2s linear;
  overflow: hidden;
}

.how-to-choose-card {
  cursor: pointer;
  position: relative;
  padding-left: 36px;
  margin-top: 200px;
  width: 588px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 17px 42px rgb(0 0 0 / 12%);
  transition: height 0.2s ease-in;
  height: 135px;
}

.add-height {
  height: 220px;
}

.add-height .on-click-details {
  height: 75px;
  transition: height 0.2s linear;
}

<div >
  <h3>1. Choose a room and date</h3>
  <p >Contact us via phone or email, ask for availability of you choice of room. We might offer you something exciting.</p>
  <svg  width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
    <circle cx="20" cy="20" r="20" />
  </svg>
  <svg  width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M16 1.5L9 8.5L2 1.5" " stroke-width=" 3" stroke-linecap="round" stroke-linejoin="round" />
  </svg>

</div>

Hope this helps.

Iterations:

If you look closely on the dev tools, you can see the overriding of .add-height:

So you might wanna consider adding this:

.add-height.how-to-choose-card {
  height: 188px;
}

Or, put the above code after .how-to-choose-card:

.how-to-choose-card {
  cursor: pointer;
  position: relative;
  padding-left: 36px;
  margin-top: 200px;
  width: 588px;
  height: 100px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 17px 42px rgb(0 0 0 / 12%);
  transition: height 0.2s ease-in;
}

.add-height {
  height: 188px;
}

Now you'll get this:

Also, you forgot to display the <p> tag after adding the height. For that, add the following code:

.add-height .on-click-details {
  display: block;
}

If this is what you're looking for, go for it.

Here's the full code:

const card = document.querySelector(".how-to-choose-card");
const details = document.querySelector(".on-click-details");

card.addEventListener("click", () => {
  card.classList.toggle("add-height");
  details.classList.toggle("display-block");
});

.add-height.how-to-choose-card {
  height: 188px;
}

.display-block {
  display: block;
  transition: 1s ease-in;
}

.on-click-details {
  display: none;
  width: 516px;
  height: 54px;
  margin-top: 45px;
  margin-left: 8px;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  /* or 27px */
  color: #848fac;
}

.add-height .on-click-details {
  display: block;
}

.how-to-choose-card {
  cursor: pointer;
  position: relative;
  padding-left: 36px;
  margin-top: 200px;
  width: 588px;
  height: 100px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 17px 42px rgb(0 0 0 / 12%);
  transition: height 0.2s ease-in;
}

<div >
  <h3>1. Choose a room and date</h3>
  <p >Contact us via phone or email, ask for availability of you choice of room. We might offer you something exciting.</p>
  <svg  width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
    <circle cx="20" cy="20" r="20" />
  </svg>
  <svg  width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M16 1.5L9 8.5L2 1.5" " stroke-width=" 3" stroke-linecap="round" stroke-linejoin="round" />
  </svg>

</div>

In simple terms, order of CSS matters.

Here's an alternate one, if you don't wanna change the CSS:

const card = document.querySelector(".how-to-choose-card");
const details = document.querySelector(".on-click-details");

card.addEventListener("click", () => {
  card.classList.toggle("add-height");
  details.classList.toggle("display-block");
});

.on-click-details {
  width: 516px;
  height: 54px;
  margin-top: 45px;
  margin-left: 8px;
  margin-bottom: 0;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  /* or 27px */
  color: #848fac;
  height: 0;
  transition: height 0.2s linear;
  overflow: hidden;
}

.how-to-choose-card {
  cursor: pointer;
  position: relative;
  padding-left: 36px;
  margin-top: 200px;
  width: 588px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0px 17px 42px rgb(0 0 0 / 12%);
  transition: height 0.2s ease-in;
  height: 135px;
}

.add-height {
  height: 220px;
}

.add-height .on-click-details {
  height: 75px;
  transition: height 0.2s linear;
}

<div >
  <h3>1. Choose a room and date</h3>
  <p >Contact us via phone or email, ask for availability of you choice of room. We might offer you something exciting.</p>
  <svg  width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
    <circle cx="20" cy="20" r="20" />
  </svg>
  <svg  width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M16 1.5L9 8.5L2 1.5" " stroke-width=" 3" stroke-linecap="round" stroke-linejoin="round" />
  </svg>

</div>

Here's the final preview: