Afficher cacher Div avec un ID auto incrémental

@khaledBoussoffara

J'ai rien compris :) peux tu reformuler ta phrase.

j'utilise ce code pour afficher des div echo '<div class="hidden"' .'id="' .++$i .'"' .'>'; l'id est incrémental et j'associe à chaque div un bouton pour afficher et cacher la div courante par exemple div id ="1" avec son bouton afficher cacher et je veux que chaque bouton applique hide show seulement au div courant c'est à dire le premiere bouton affiche et cache seulement le div id ="1" le probleme que tous les boutons appliquent l'effet seulement au div 1

Mets ton code comme il faut à l'aide du bouton

</>

Sinon, on voit pas ce que tu écris, le site interprétant les div etc.. comme tel si ils ne sont pas entourés des balises de code

$sql = 'SELECT * FROM Total ';   
$req = $connexion->query($sql); 
$i=0; 
while($row = $req->fetch()) 
{  
echo'<button class="lien">Afficher détails</button>';
echo '<div class="sub_div"' .'id="' .++$i .'"'  .'>';
 echo'</div>';

voilà donc j'auais à chaque fois ```
div id="1"

div id="2"

etc et je veux que chaque bouton du div toggle le div courant  ( afficher cacher le div associé a chaque bouton ) 

pour voir le live demo visiter www.capimmo.co dans les artciles à vendre j'ai mi Afficher détails pour afficher et cacher un div mais vous allez remarquer que tous les boutons appliquenemt l'effet seulement à la premiere div

Ok parfait,

je te propose ceci =>

Dans ta boucle

    <div data-id="<?= $id ?>" class="show"></div>
    <button data-id="<?= $id ?>">Afficher</button>

// dans ton js.

        $(function () {
                $("button[data-id]").on('click', function (event) {
                        event.preventDefault();
                        var id = $(this).data('id');
                        $('div[data-id=' +id+']').toggleClass('hide')
                })
        })

// dans ton css

.hide{
    display: none;
}

@Balbert dsl mais ça reste le meme probleme tu peux voir sur http://capimmo.co pour me comprendre

C'est normal, fait ceci =>

dans ta vue

1 - Envele les identifiants [displayText, toggleText] respectivement sur le lien et la div.
2 - Commente carrement ton lien.
3 - Faire ceci ->

<?php

$sql = 'SELECT * FROM Total ';   
$req = $connexion->query($sql); 
$i=0; 
while($row = $req->fetch()){ ?>

<div class="sub_div">
...
      <button data-id="<?= ++$id ?>">Afficher détails</button>
      <!-- Cette ligne ne sert à rien <a id="displayText" href="javascript:toggle();">Cacher</a> --> 
    <div data-id="<?= ++$id ?>">
        <h1><?= $row->title ?></h1>
      </div>
  <?php } ?>

// dans ton js

$(function () {
                $("button[data-id]").on('click', function (event) {
                        event.preventDefault();
                        var id = $(this).data('id');
                        $('div[data-id=' +id+']').toggleClass('hide');
                        if ( $('div[data-id=' +id+']').hasClass('hide'))
                                 $(this).html("Afficher détails")
                        else 
                                   $(this).html("Cacher détails")
                })
        })

// dans ton css :

    .hide {
        display:none;
    }

Voila voila .

Attention, je vois des duplications d'identifiants essaye de les corrigés aussi

j'ai pas compris pourquoi l'effet s'applique au div qui précède

Verifie bien que le deuxième data-id vaut $id au lieu de ++$id