How to adapt so that all <li> items pull a different div?

Question

Hello, I have the following code:

<ul class="t_situacoes">
<?

if(isset($row)){
    $row_pedido = $row;
}

if (!isset($situacoes_andamento))
    $situacoes_andamento=$row_pedido->situacoes;

foreach($situacoes_andamento as $situacao){
    if(in_array($situacao->id_situacao, $situacoes_layout)){
        ?>
        <li class="situacao-<?=$situacoes_layout_classes[$situacao->id_situacao];?> <?=$row_pedido->id_situacao == $situacao->id_situacao ? 'atual' : ''?>">
            <span></span>
            <?=$situacao->nome_situacao;?>
            <div id="botao-mais-detalhes" class="show-hidden-menu-<?=$situacoes_layout_classes[$situacao->id_situacao];?>" style="text-transform: lowercase;">&#709; mais detalhes</div>

        </li>
        <div id="box-mais-detalhes" class="hidden-menu-<?=$situacoes_layout_classes[$situacao->id_situacao];?>" style="display: none;">
            <div id="seta"></div>
            <p id="texto-mais-detalhes">
                <?=$situacao->nome_situacao;?>
                <small>em <?=$ecommerce->getDate($situacao->data);?> &agrave;s <?=$situacao->hora;?></small>
                <em><?=$situacao->observacao_loja;?></em>
            </p>
        </div>

<?  }
} ?>

<script>
    $(document).ready(function() {
        $('.show-hidden-menu-<?=$situacoes_layout_classes[$situacao->id_situacao];?>').click(function() {
            $('.hidden-menu-<?=$situacoes_layout_classes[$situacao->id_situacao];?>').slideToggle("slow");
        });
    });
</script>

It turns out that the div action 'more details' only works on the last item

generated. Can someone explain to me where I’m going wrong?

Answer 1

It will go wrong even because the script is out of the loop and the last value of <?=$situacoes_layout_classes[$situacao->id_situacao];?> will only get the last related div.

Also note that you are repeating the id’s id="texto-mais-detalhes", id="seta" and id="botao-mais-detalhes" inside the loop. It is not correct to repeat the same id in more of an element on the same page. If these id’s are useless, you should remove them or use as class.

To solve your problem, you don’t need to use any type of identification that relates one element to another. You can use jQuery methods:

$(document).ready(function() {
   $('.show-hidden-menu').click(function(){
      $(this)  // div clicada
      .closest('li')  // busca a <li> onde está a div
      .next()  // busca o próximo elemento, que é a div a ser mostrada
      .slideToggle("slow");  // faz o slide
   });
});

The div to be clicked would be just like this, without id and without PHP code:

<div class="show-hidden-menu" style="text-transform: lowercase;">&#709; mais detalhes</div>

As well as you should remove the other repeated id’s and the PHP codes you are adding in the classes.

However, according to specifications HTML5, you can’t use a div as a direct child of a ul. You’d have to put every div inside every li, right after the div to be clicked. Then it would change the jQuery code to open:

$(document).ready(function() {
   $('.show-hidden-menu').click(function(){
      $(this)  // div clicada
      .next()  // busca o próximo elemento, que é a div a ser mostrada
      .slideToggle("slow");  // faz o slide
   });
});