Toggle Problems. Some array's is not toggling-CodePudding

Why array 2 is not toggling?

"-" toggled, " " not toggled

toggled

php code:

$html = '';
    $array = array('1' => 'Airport', '2' => 'Restaurant', '3' => 'Market');

    foreach ($array as $key => $name) {
        $x = $key;
            $html .= '<table ><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

CodePudding user response：

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>