I have image that has multiple markers on it that can be clicked to bring up different popups. However, I need to some help refining the code to work properly and to link to the correct id tag.
My template code:
{% set var = craft.entries.section('availablehomes').relatedTo(category).level(2) %}
{% for entry in var %}
<!-- Popup Modal -->
{% set plotPopup = 'plotPopup' ~ entry.title|camel %}
<div class="property popup" id="{{ plotPopup }}">
....markup.......
</div>
{% endfor %}
Which outputs
<div class="property popup" id="plotPopupplot1">...</div>
<div class="property popup" id="plotPopupplot2">...</div>
<div class="property popup" id="plotPopupplot3">...</div>
<div class="property popup" id="plotPopupplot4">...</div>
And below is the current script text:
<script>
// When the user clicks on plot number, open the popup
function openPopup() {
{% set plottitle = craft.entries.section('availablehomes').relatedTo(category).level(2) %}
{% for entry in plottitle %}
var popup = document.getElementById('plotPopup{{ entry.title|json_encode()|camel }}');
{% endfor %}
popup.classList.toggle('show');
}
</script>
Which is printing out as:
<script>
// When the user clicks on <div>, open the popup
function openPopup() {
var popup = document.getElementById('plotPopupplot1');
var popup = document.getElementById('plotPopupplot2');
var popup = document.getElementById('plotPopupplot3');
var popup = document.getElementById('plotPopupplot4');
popup.classList.toggle('show');
}
</script>