click button to open hidden location map only works on the first one

Question

I have this card which I need to copy paste a lot of time but if I do copy paste it the location button which is supposed to toggle the hidden location map only works for the first card and doesn't work for the rest. I want all the cards to open and hide the location map independently when clicked on their respective location icon.

var res_location_btn = document.querySelector('.res-location-ico');
var res_location_con = document.querySelector('.res-card-location-con');

res_location_btn.addEventListener('click', show_res_location_con);

function show_res_location_con() {
  res_location_con.classList.toggle('show-res-card-location-con');
}

.res-card-outer {
  background-color: #fdfdfd;
  padding: 10px 10px 10px 10px;
  margin: 10px 0px 10px 0px;
}

.res-card-top-imginfo-box {
  display: flex;
}

.res-loc-shre-con {
  display: flex;
  padding: 4px 5px 5px 5px;
}

.res-location-ico {
  width: 17px;
  height: 17px;
  cursor: pointer;
  padding: 0px 7px 0px 0px;
}

.res-location-text {
	font-size: 14px;
	color: #8d8d8d;
	padding: 2px 5px 0px 5px;
}

.res-card-location-con {
  height: 0px;
  overflow: hidden;
}

.show-res-card-location-con {
  height: 250px;
}

.res-card-location-map {
  width: 100%;
  height: 100%;
  border: 0px;
}

<div class='res-card-outer'>
        <div class='res-card-top-imginfo-box'>
            <div class='res-loc-shre-con'>
              <img class='res-location-ico' src='https://ibnul.neocities.org/_temporary/address-location-icon.svg' alt=''>
              <p class='res-location-text'>2948 Resoif Voufo</p>
            </div>
        </div>
        <div class='res-card-location-con'>
          <iframe class='res-card-location-map' src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31678.348374963647!2d-74.01457909623672!3d40.71440061428468!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1576717239432!5m2!1sen!2sbd" frameborder="0" allowfullscreen=""></iframe>
        </div>
      </div>

      <div class='res-card-outer'>
        <div class='res-card-top-imginfo-box'>
            <div class='res-loc-shre-con'>
              <img class='res-location-ico' src='https://ibnul.neocities.org/_temporary/address-location-icon.svg' alt=''>
              <p class='res-location-text'>2948 Resoif Voufo</p>
            </div>
        </div>
        <div class='res-card-location-con'>
          <iframe class='res-card-location-map' src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31678.348374963647!2d-74.01457909623672!3d40.71440061428468!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1576717239432!5m2!1sen!2sbd" frameborder="0" allowfullscreen=""></iframe>
        </div>
      </div>

Please show it in pure javascript. Thanks.

Answer 1

I want all the cards to open and hide the location map independently

Then you have to handle each card independently. Try the snippet below to see if that's what you want, maybe the code tells what it does without the explanation (I also put the comments on in). I only changed the javascript part, didn't touch in html/css.

// **querySelectorAll** instead of querySelector
// get all elements whose class of res.location-ico
var res_location_btns = document.querySelectorAll('.res-location-ico');

// add an event listener for EACH BUTTON
res_location_btns.forEach(btn => {
  btn.addEventListener('click', show_res_location_con);
});

function show_res_location_con(e) { 
  // traverse the parents and find the closest element whose class of res-card-outer
  var card = e.target.closest('.res-card-outer');
  
  // find the next child element whose the class of res-card-location-con
  var res_location_con = card.querySelector('.res-card-location-con');
  
  // toggle class, and remember, this is INDEPENDENT FOR EACH BUTTON
  res_location_con.classList.toggle('show-res-card-location-con');
}

.res-card-outer {
  background-color: #fdfdfd;
  padding: 10px 10px 10px 10px;
  margin: 10px 0px 10px 0px;
}

.res-card-top-imginfo-box {
  display: flex;
}

.res-loc-shre-con {
  display: flex;
  padding: 4px 5px 5px 5px;
}

.res-location-ico {
  width: 17px;
  height: 17px;
  cursor: pointer;
  padding: 0px 7px 0px 0px;
}

.res-location-text {
  font-size: 14px;
  color: #8d8d8d;
  padding: 2px 5px 0px 5px;
}

.res-card-location-con {
  height: 0px;
  overflow: hidden;
}

.show-res-card-location-con {
  height: 250px;
}

.res-card-location-map {
  width: 100%;
  height: 100%;
  border: 0px;
}

<div class='res-card-outer'>
  <div class='res-card-top-imginfo-box'>
      <div class='res-loc-shre-con'>
        <img class='res-location-ico' src='https://ibnul.neocities.org/_temporary/address-location-icon.svg' alt=''>
        <p class='res-location-text'>2948 Resoif Voufo</p>
      </div>
  </div>
  <div class='res-card-location-con'>
    <iframe class='res-card-location-map' src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31678.348374963647!2d-74.01457909623672!3d40.71440061428468!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1576717239432!5m2!1sen!2sbd" frameborder="0" allowfullscreen=""></iframe>
  </div>
</div>

<div class='res-card-outer'>
  <div class='res-card-top-imginfo-box'>
      <div class='res-loc-shre-con'>
        <img class='res-location-ico' src='https://ibnul.neocities.org/_temporary/address-location-icon.svg' alt=''>
        <p class='res-location-text'>2948 Resoif Voufo</p>
      </div>
  </div>
  <div class='res-card-location-con'>
    <iframe class='res-card-location-map' src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31678.348374963647!2d-74.01457909623672!3d40.71440061428468!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1576717239432!5m2!1sen!2sbd" frameborder="0" allowfullscreen=""></iframe>
  </div>
</div>