<?php if( have_rows('lp_phone', 'option') ): ?>
<?php while( have_rows('lp_phone', 'option') ): the_row();
$number = get_sub_field('lp_number', 'option');
$icon = get_sub_field('number_icon', 'option');
$numberShow = get_sub_field('id_show', 'option');
?>
<div class="contacts-number">
<span class="contacts-number-icon"><?= $icon; ?></span>
<a href='javascript:;' onclick=showTooltip() id="link"> +38xxx-xxx-xx-xx </a>
<div id=<?= $numberShow; ?> style='display: none'><?= $number; ?></div>
</div>
<?php endwhile; ?>
<?php endif; ?>function showTooltip()
{
var myDiv = document.getElementById('<?= $numberShow; ?>');
var myLink = document.getElementById('link');
console.log(myDiv);
if(myDiv.style.display == 'none')
{
myDiv.style.display = 'block';
myLink.style.display = 'none';
}
else {
myDiv.style.display = 'none';
}
return false;
id="link".this; а вместо того, чтобы выдумывать какие-то стрёмные id для блоков которые надо показать, поднимайтесь при клике до общего предка блока и кликнутого элемента, и ищите блок через querySelector:onclick="showTooltip(this)"function showTooltip(link) {
const div = link.parentNode.querySelector('div');
if (div.style.display === 'none') {
div.style.display = 'block';
link.style.display = 'none';
} else {
div.style.display = 'none';
}
}document.querySelectorAll('.contacts-number a').forEach(n => {
n.addEventListener('click', onClick);
});
function onClick() {
const div = this.closest('.contacts-number').querySelector('div');
if (div.style.display === 'none') {
div.style.display = 'block';
this.style.display = 'none';
} else {
div.style.display = 'none';
}
}
Средний