[SOLUCIONADO] Cambiar div height con javascript

[pabloabran08]

Hola,
no sé si estoy en el lugar indicado pero tampoco se como se llama lo que quiero hacer.
Llevo un tiempo rompiéndome la cabeza con este código sin conseguirlo, así que recuro a solicitar su amable ayuda.

La idea es obtener un listado de elementos que consigo de una tabla sql.
Quisiera que cada elemento de la lista tenga una pestaña que se delegue al apretar un botón.
Algo así para cada elemento de la lista:

<Boton><Div que se deplega al apretar boton><elemento>

Tengo un código que funciona con los Div desplegables pero mi problema es que cuando aprieto un botón, sin importar el elemento que le corresponda, se despliegan todas las pestañas de todos los elementos.

Aquí les pongo mi código para que entiendan mejor la idea. El div desplegable es el que tiene la etiqueta class="panhora".

Código HTML:

<script>
(function($){
$(document).ready(function() {
$("div.panhora").height(0);
$("div.panhora_button").click(function(){
$("div.panhora").animate({
height: "50px",
opacity: 0.9
}, 1200);
$("div.panhora_button").toggle();
});
$("div#hide_button").click(function(){
$("div.panhora").animate({
height: "0px",
opacity: 0
}, 1200)
});
});
})(jQuery);
</script>

<style type="text/css">
.panhora {
    background-color:#BCBCBC;
    height:0px;
    width:200px;
    margin:10px;
    color:#fff;
	overflow:hidden;
}
</style>

<?php
$editFormAction = $_SERVER['PHP_SELF'];

$link = mysqli_connect('localhost', 'root', '', 'bdredsocial');
$consulta = "SELECT * FROM Tabla ORDER BY orden";
$resultado = mysqli_query($link, $consulta);
$elementos = null;
while ($datos = mysqli_fetch_assoc($resultado)){
	$elementos[$datos['id']] = '<div id="hora">
	<div class="panhora_button" style="display: visible; cursor:pointer;">ESTO ES UN BOTON(Abrir)</div>
	<div class="panhora_button" id="hide_button" style="display: none; cursor:pointer;">ESTO ES UN BOTON(Cerrar)</div>
	<div class="panhora" id="elemento-'.$datos['id'].'">Cambiar hora:<br />
		<form action=" '.$editFormAction.'" method="post" name="form1" id="form1">
		<table align="center"><tr valign="baseline">
		<td><input type="time" name="hora" value="" size="28" /></td>
		<td><input type="submit" name="Bonton1" id="Boton1" value="Actualizar" /></td></tr>
		</table>
		<input type="hidden" name="MM_insert" value="form1" />
		</form>
	</div>
</div>
<div id="Texto">'.$datos['Texto'].'</div>';
}?>
<ul id="lista"><?php
if(!empty($elementos)) {
	foreach ($elementos as $id => $elemento)
		echo '<li id="'.$id.'">'.$elemento.'</li>';
}?>
</ul> 

Se me ocurría que debería asignar un id a cada div "panhora" y de alguna forma recuperar este id con la función javascipt al presionar el botón correspondiente a ese elemento, pero eso es lo que no sé hacer

Si me pueden ayudar a resolver esto, se los agradecería un montoon!

[Alexis88]

Con el sueño que tengo a la 1:48 am, se me ocurre que crees un pseudo-atributo en cada botón y le asignes el id del <div> que deseas mostrar/ocultar.

Código HTML:

<div class="panhora_button" style="display: visible; cursor:pointer;" data-id = "elemento-'.$datos['id'].'">
    ESTO ES UN BOTON(Abrir)
</div>
 

Y con el método data, recuperas dicho valor.

Código Javascript:

$("div.panhora_button").click(function(){
    var id = $(this).data("id");
    $("#" + id).animate({
        height: "50px",
        opacity: 0.9
    }, 1200);
    $("div.panhora_button").toggle();
});
 

Aunque no me parece correcto usar elementos <div> como botones, para eso existen elementos <button> u otros que no sean necesariamente elementos de bloque cuyo propósito es distinto.

Saludos

[pabloabran08]

Muchas gracias! Me funcionó perfecto, y tienes razón voy a cambiar esos div por botones que es mas adecuado.
Saludos.