¿Cómo mostrar información diferente de una consulta MySQL?

[DiegoEscobar]

Buenas noches, no se bien como explicar mi duda, tengo unas imágenes guardadas en mi base de datos con su respectiva información (nombre, dimensiones, categoría, etc) y estas imágenes las muestro por orden de "ID" hasta aqui todo bien, pero lo que quiero es que al hacer clic en cada imagen aparezca un DIV (utilizo java script para mostrar/ocultar divs) en el cual se muestre la información de la imagen a la que se hizo el clic.

Código PHP:

  <?PHP
 
$qry    =    "SELECT * FROM imagenes ORDER BY id ASC";
$rst    =    mysql_query($qry);
 
while ($img = mysql_fetch_array($rst)){
 
?>
 
<section onClick="mostrar()" class="imagen" style="background:url(<?PHP echo $img['imagen']; ?>);background-size: 180px auto;">
<div class="nombre"><?PHP echo $img['nombre']; ?></div>
</section>
 
<!-- Sección oculta -->
<section id="info-box">
    <div class="cerrar icon-close" onClick="ocultar()"></div>
    <div id="info">
    <!-- Aquí quiero colocar la información de la imagen a la que se le hizo clic -->
    </div>
</section>
 
<?PHP } ?>   

Código:

function mostrar(){
document.getElementById('info-box').style.display = ('block');}

function ocultar(){
document.getElementById('info-box').style.display = ('none');}

Espero que me puedan ayudar, y desde ya les agradezco.

[xfxstudios]

Prueba asi:

Código HTML:

<div clas="col-lg-12">
  <div class="col-lg-4">
    <div class="row">
    <button type="button" class="btn btn-primary" id="A" onClick="mostrar(this.id)">Muestra A</button>
    </div>
    <div class="row">
    <div class="col-lg-12 alert alert-info" id="A" style="display:none" >
        Esto se verá
      <button type="button" class="btn btn-danger pull-right" id="A" onClick="ocultar(this.id)">Ocultar</button>
    </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="row">
    <button type="button" class="btn btn-primary" id="B" onClick="mostrar(this.id)">Muestra A</button>
    </div>
    <div class="row">
      <div class="col-lg-12 alert alert-info" id="B"  style="display:none" >
          Esto se verá
        <button type="button" class="btn btn-danger pull-right" id="B" onClick="ocultar(this.id)">Ocultar</button>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="row">
    <button type="button" class="btn btn-primary" id="C" onClick="mostrar(this.id)">Muestra A</button>
    </div>
    <div class="row">
    <div class="col-lg-12 alert alert-info" id="C"  style="display:none" >
        Esto se verá
      <button type="button" class="btn btn-danger pull-right" id="C" onClick="ocultar(this.id)">Ocultar</button>
    </div>
  </div>
  </div>
</div>
 

Código Javascript:

function mostrar(X){
  $("div[id="+X+"]").show(1000);
}
function ocultar(X){
  $("div[id="+X+"]").hide(1000);
}
 

Muestra que hice: https://codepen.io/anon/pen/ezOoeW

adaptalo a tu diseño

[rodocoyote15]

La solución de xfxstudios es muy buena. Sin embargo, si tienes 1000 registros, tendrás que esperar a que se creen esos 1000 divs.

Lo mejor es crear un solo div con los datos 'generales', y llenarlos con una llamada por ajax.
Puedes buscar información de ello en Google, saludos.

[DiegoEscobar]

Gracias a los dos por su aporte, me ayudo mucho tu ejemplo xfxstudios, y tienes razón rodocoyote15 al tener tantos registros dará problemas, aunque pienso solucionarlo cargando registros conforme se vayan consultando, vi una pagina donde no se cargaba todo el contenido de la pagina hasta que se solicitara (haciendo hacia abajo el scrollbar) ¿saben algo del tema?

[xfxstudios]

busca Scroll infinito, eso es con ajax