To reveal the secret map location, just tap on the button - but remember, this only applies to

I am encountering an issue with duplicating a card and toggling the hidden location map. Currently, the location button only works for the first card and not for the rest. I need each card to independently open and hide the location map 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 provide a solution using pure javascript. Thank you.

javascripthtmlcss

Answer №1

I wish for every card to reveal and conceal the location map separately

Next, you must address each card individually. Test the code snippet below to confirm if it meets your requirements. Perhaps the code itself elucidates its functionality without needing an explanation (I have included comments as well). I only made modifications to the JavaScript part, leaving the HTML/CSS untouched.

// **querySelectorAll** instead of querySelector
// select all elements with a 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 with a class of res-card-outer
  var card = e.target.closest('.res-card-outer');
  
  // locate the next child element with the class of res-card-location-con
  var res_location_con = card.querySelector('.res-card-location-con');
  
  // toggle class, and remember, this works INDEPENDENTLY 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>

Answer №2

To add interactivity to your website, simply attach an onClick event to each res-card-location-con div by assigning it a unique id. Pass this id to the designated callback function. Within the callback function, you can locate the specific DOM element using the provided id and easily modify its class attribute.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Filtering deeply nested arrays

Hey, I'm working with this interesting array: [ { "Navn": "Long Island Iced Tea", "Nummer": "2", "Glas i ml": "250", "Instruktioner": "", "a": "Hæld is i glasset", "b": "pynt med en skive lime", ...

javascriptarraysjsonsorting

Why isn't my object updating its position when I input a new value?

<hmtl> <head> <!--<script src='main.js'></script>--> </head> <body> <canvas id='myCanvas'> </canvas> <script> function shape(x,y){ this.x=x; this.y=y; var canvas = document.get ...

javascripthtmlcsscanvas

Using AJAX does not automatically trigger the form submission process

It seems like the preventDefault function is working as intended to prevent the form from posting. However, the update() function is not sending the form data to the specified URL. I am perplexed by this issue and unsure of why it is happening. UPDATE: I ...

jqueryhtmlajax

Interacting with Zend forms using AJAX and JavaScript's onchange event

I'm currently working on a code that utilizes the onchange event in my application. Here's the code snippet I have so far: .Phtml <script type="text/javascript"> function submit() { $id = intval($_GET['id']) ...

javascriptajaxzend-frameworkzend-form

Tips for consuming a REST API to retrieve JSON data and assign it to a variable for use in React JS

I'm currently working on developing a shopping application using React.js. I found inspiration from a sample application on https://codepen.io/paulkim/pen/oZLavq , and now I am looking to fetch product information from an API call. I have attempted to ...

javascriptreactjsreact-redux

The carousel caption in Bootstrap 5 vanishes when viewing the website on a smaller device

Currently, I'm dealing with an issue using bootstrap carousel code. The carousel text displays properly on desktop screens but disappears when viewed on smaller sized screens. It appears that the text is being hidden behind the image. Various attempts ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Bootstrap 5 introduces an innovative animated hamburger icon that transforms into an X symbol when clicked

I have encountered an unusual behavior when trying to animate the hamburger button using Bootstrap 5. Previously, with Bootstrap 4, everything worked smoothly. However, in Bootstrap 5, I noticed that the icon initially displays as 'X' and then sw ...

cssbootstrap-4css-animationsbootstrap-5

PHP issues caused by Ajax form compatibility

I'm currently working on developing an upload website and I've encountered some challenges while trying to implement an upload progress bar. The Ajax form in my scripts seems to be causing issues with the PHP code, preventing the file from being ...

javascriptphpjqueryajax

Aligning text vertically within an HTML <a> tag block

Calling all CSS experts! I'm struggling with aligning text to the bottom of a block element with a fixed width and height that contains a background image and a title. I've tried using display: table-cell; and vertical-align: bottom; without succ ...

htmlcsstagsvertical-alignment

Steps for programmatically closing a Dialog Window in a showmodeldialog window

When opening the window, I follow this approach: var MyArgs = new Array(ParmA, ParmB, ParmC, ParmD, ParmE, ParmF); var leftpost = getWindow_TotalWidth() - 1000 - 100; var WinSettings1 = "dialogHeight:580px; dialogWidth:950px;edge:Raised; center:Yes; resi ...

javascriptasp.netvb.netmodal-dialog

Validation of the existence of a MongoDB user

I'm currently working on implementing a sign-up form using Mongo, Node.js, and Express.js. I've managed to successfully insert a document into the users collection for a new user. However, I now need to set up validation to check if a user alread ...

javascriptnode.jsmongodbexpressejs

The JQuery(document).ready function does not seem to be executing on the webpage, but it works as expected when placed in a

I have encountered a peculiar problem. It's strange to me because I can't figure out the root cause of it, despite trying everything in the Chrome Developer Tools debugger. Here is a snippet of code that works when I run it from a file on my desk ...

javascriptjquerycssgoogle-chromesingle-page-application

I attempted to use the Stripe API, but it seems to be non

I seem to be encountering an issue with the stripe.customers.create. My goal is to create a new Stripe customer using the email address of the current user, and then update my user with the generated customer.id. Despite the fact that stripe.customers.cre ...

javascriptvue.jsstripe-payments

Serialize a form while keeping the submitted data private

Is there a way to achieve serialization without triggering the submit function for an ajax call? I've searched extensively for a solution to this issue without any luck. The java script function is invoked when a button within the form is clicked. do ...

javascriptajaxforms

What is the best way to retrieve a JSON key in ReactJS?

I am currently facing a rendering issue. In my componentDidMount function, I am using axios to make a GET call and then updating the state with the received JSON data. The problem arises when I try to access the keys of the JSON in the render method becau ...

javascriptjsonreactjs

Tips for preloading an ENTIRE webpage

I am looking for a way to preload an entire web page using JavaScript in order to have it cached in the user's browser. While I know how to preload images with JS, my goal is to also preload the entire page itself. For example, on my website, there ...

javascripthtmlpreloadyslow

Using the hover event in a jQuery plugin: A step-by-step guide

A star rating plugin I am developing is encountering an issue with implementing the hover event. jquery, (function($){ $.fn.extend({ rater: function(options) { var defaults = { } var options = $.exten ...

javascriptjqueryjquery-pluginsjquery-hover

Extracting the magnifying glass from the picture

After implementing a function to add a magnifying glass (.img-magnifier-glass) on button click, I am now looking to remove the glass by clicking the "cancel" button. However, I am unsure of how to write this function to interact with the "magnify" function ...

javascripthtmlcssfunction

Performance comparison between Javascript Object and Map/Set for key lookup

I decided to experiment with the performance of JavaScript Object, Map, and Set when it comes to accessing keys. I tested the following three code snippets on JSBEN.CH. Objects const object = {}; for (let i = 0; i < 10000; ++i) { object[`key_${i}` ...

javascriptperformancedictionaryobjectset

Determining the Nearest Form to an Element using jQuery

I developed a JavaScript/jQuery script that allows me to check all checkboxes within a form. The function works effectively, but the issue is that it checks all checkboxes on the page regardless of their form wrapper. Here is the function: function toggl ...

javascriptjqueryhtmlcheckbox