Hola, que tal!
Yo lo tengo implementado de la siguiente forma, igual te puede dar una idea:
Para cargar las noticias, articulos, etc en la pag, realizo una petición ajax
y en el success cargo todos los datos y posteriormente gestiono los datos
de la visibilidad llamando a la funcion gestionaNoticias.
$('#todasNot') es el DIV donde quiero que se pinten todas las noticias/articulos.
Código HTML:
<div id="todasNot">
</div> Código PHP:
success: function(data){
$('#todasNot').html(data);
gestionaNoticias(data);
Código PHP:
function gestionaNoticias(data)
{
var caracteresAMostrar = 600;
var elementosObtenidos = document.getElementsByClassName("noticia");
for (var i=0; i<elementosObtenidos.length; i++) {
var idNoticia= elementosObtenidos[i].childNodes[0].value;
var contenido = elementosObtenidos[i].innerHTML;
if (contenido.length > caracteresAMostrar) {
var resumen = contenido.substr(0, caracteresAMostrar);
var todo = contenido.substr(caracteresAMostrar, contenido.length - caracteresAMostrar);
var nuevocontenido = resumen + '<span class="completo">' + todo +
'</span><a href="#" id="' + idNoticia + '"class="masTex" title= "Leer mas" onclick="cazaLeer(' + idNoticia + ')">Leer mas...</a>';
//nuevocontenido.replace('title="Eliminar noticia" style="margin-right:10px; display:none"', 'title="Eliminar noticia" style="margin-right:10px; display:inline"');
elementosObtenidos[i].innerHTML = nuevocontenido;
}}
$('#todasNot').innerHTML = elementosObtenidos;
}
La función cazaLeer es la que tiene que saber que instancia ha sido seleccionada y por tanto la que tiene que gestionar el despliegue o
contraer la info.
Código PHP:
function cazaLeer(mId){
//Obtenemos el a href seleccionado
$idSelec= document.getElementById(mId);
//Obtenemos el padre llamado noticia
$padreSelec= $idSelec.parentNode;
//Buscamos el span llamado completo
$claseCompleto= $padreSelec.getElementsByClassName("completo");
switch ($idSelec.attributes["title"].value)
{
case "Leer menos":
{
$idSelec.setAttribute("title", "Leer mas");
$idSelec.innerHTML= "Leer mas...";
$claseCompleto[0].style.display= "none";
break;
}
case "Leer mas":
{
$idSelec.setAttribute("title", "Leer menos");
$idSelec.innerHTML= "Leer menos...";
$claseCompleto[0].style.display= "block";
break;
}
default:
break;
}
}
Por cierto, no estarás haciendo un postgrado de desarrollo web?