0
148
VistasToggle Problems. Some array's is not toggling
Why array 2 is not toggling?
"-" toggled, "+" not toggled
php code:
$html = '';
$array = array('1' => 'Airport', '2' => 'Restaurant', '3' => 'Market');
foreach ($array as $key => $name) {
$x = $key;
$html .= '<table class="pad-3"><tr>';
$html .= '<td><a href=\'javascript:toggle("' . $x . '");\'>
<img id="' . $x . '_img_1" src="../img/expandable_1.gif" width="9" height="9"/>
<img id="' . $x . '_img_2" src="../img/expandable_2.gif" width="9" height="9" style="display:none"/> ' . $name . '</a>
</td>';
$html .= '</tr></table>';
$html .= '<div id="' . $x . '_div_1" style="margin-left:15px;display:none;">';
$html .= '</div>';
}
echo $html;
javascript:
function toggle(type) {
var a = $('#' + type + '_div_1');
var b = $('#' + type + '_img_1');
var c = $('#' + type + '_img_2');
if (a.is(':visible')) {
a.hide();
b.show();
c.hide();
} else {
a.show();
b.hide();
c.show();
}
}
Temporary Fix: I tried to change my Restaurant array index to 3. sample: "$array = array('1' => 'Airport', '3' => 'Restaurant', '4' => 'Market');"
Somehow the when I assign a index as 2 its not toggling. I'm having problems when I set the index to 2
Additional Info: when I add an alert line on the js. When I click the Restaurant the alert will prompt but still not toggling
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
You REALLY need to delegate
I have simplified the whole thing - gotten rid of the needless table and the images
window.addEventListener("load",function() {
document.getElementById("container").addEventListener("click",function(e) {
const tgt = e.target.closest("a");
if (tgt && tgt.classList.contains("toggle")) {
e.preventDefault(); // stop link
let isHidden = tgt.nextElementSibling.hidden;
tgt.nextElementSibling.hidden = !isHidden;
tgt.querySelector("span.exp").classList.toggle("plus",!isHidden)
tgt.querySelector("span.exp").classList.toggle("minus",isHidden)
}
})
}).content {
margin-left: 15px;
}
.pad-3 {
padding: 3px
}
a.toggle {
text-decoration: none
}
.exp {
font-size: 12px;
padding-right: 10px;
}
.exp.plus::after {
content: "⊞"
}
.exp.minus::after {
content: "⊟"
}<div id="container">
<a href="#" class="pad-3 toggle"><span class="exp plus"></span>Airport</a>
<div class="content" hidden>Airport</div><br/>
<a href="#" class="pad-3 toggle"><span class="exp plus"></span>Restaurant</a>
<div class="content" hidden>Restaurant</div><br/>
<a href="#" class="pad-3 toggle"><span class="exp plus"></span>Market</a>
<div class="content" hidden>Market</div><br/>
</div>PHP
<div id="container">
<?php
$array = array('1' => 'Airport', '2' => 'Restaurant', '3' => 'Market');
foreach ($array as $key => $name) { ?>
<a href="#" class="pad-3 toggle"><span class="exp plus"></span><?= $name ?></a>
<div class="content" hidden>
<?= $name ?>
</div><br/>
<? } ?>
</div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta