Script para desplegar artículos

romansoft · #1 (**permalink**) 24/09/2009, 13:54

Hola:

Alguien tiene algún script para desplegar/ocultar texto? la idea seria que en una misma página hallan varios artículos seguido uno bajo otro, pero que sólo se vean los títulos, de forma que haciendo clic en el título se despliega el artículo.

Gracias.

oktubre · #2 (**permalink**) 24/09/2009, 14:20

busca en el foro de javascript, ajax, etc
en css hay tambien cosas interesantes, seguramente te van a correr la consulta por allí.
en html lo básico sería trabajar con una etiqueta iframe, dentro de alguna tabla que formatee un poco la pagina. la lista de articulos haría que muestre solo ese tipo de cosas en el iframe y el target debería ser el nombre del iframe. porsupuesto que el iframe requiere de varios archivos que serían llamados, nota1.php, nota2.php etc.
de donde salen las notas? de una base de datos¿?

romansoft · #3 (**permalink**) 24/09/2009, 14:27

Bueno, como en esta web no trabajo con base de datos, mi intencion es de escribirlo en la misma articulos.php con algun script (supongo q en java como me dices) y que se muestre de la forma que te cuento, es para no hacer una pagina por artículo, que queda muy mal y laborioso.

oktubre · #4 (**permalink**) 24/09/2009, 14:33

te recomiendo que te interiorices un poquito en las etiquetas del tipo div, que te pueden ser muy útiles para eso.

romansoft · #5 (**permalink**) 24/09/2009, 14:37

No sé a qué te refieres, si no me concretas funciones no sé. No entiendo como un div puede hacer la función que estoy buscando.

JessicaTJ · #6 (**permalink**) 24/09/2009, 14:43

Hola romansoft, mira esto:

http://www.surguy.net/menu/index.html
o asi:
http://www.interspire.com/content/ar...and-JavaScript

Seria mas o menos algo asi lo ke kieres verdad?

GatorV · #7 (**permalink**) 24/09/2009, 14:51

Tema trasladado desde PHP

deirdre · #8 (**permalink**) 24/09/2009, 17:16

Hola romansoft

También puedes utilizar el sistema acordeón (jquery). Es muy práctico para el uso que mencionas y el efecto que produce es inmejorable.

Aquí tienes el código (le tienes que añadir el javascript jquery para que funcione).

También puedes descagar el conjunto desde aquí.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Acordeón sencillo</title>
<script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $("div > div > div:visible").hide();
            $("a.titular").click(function()
            {
                $("div > div > div:visible").slideUp();
                var div_medio = $(this).parent();
                var div_inferior_oculto = "div#" + div_medio.attr("id") + " > div:hidden";
                $(div_inferior_oculto).slideDown();
                return false;
            });
        });
    </script>
<style type="text/css">
a {
	text-decoration: none;
}
#contenedor {
	width: 550px;
	border: 1px solid #484848;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
#articulo1 {
	background-color:#FFFF99;
	padding: 8px;
	border-bottom: 1px dotted #000;
}
#articulo2 {
	background-color:#FFD24A;
	padding: 8px;
	border-bottom: 1px dotted #000;
}
#articulo3 {
	background-color:#552B00;
	color: #fff;
	padding: 8px;
}
.white {
	color: #fff;
}
.titular {
	font-variant: small-caps;
	cursor: pointer;
}
#firma {
	position: absolute;
	left: 10px;
	bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}        
</style>
</head>

<body>
<!-- ejemplo de acordeón sencillo basado en jquery, casi sin nada de estilo (se puede enriquecer mucho su aspecto aplicando estilos) -->
<div id="contenedor">
    <div id="articulo1">
        <a class="titular" >Artículo 1</a>
        <div>
            Este es mi artículo. Este es mi artículo. Este es mi artículo. Este es mi artículo.
            Este es mi artículo. Este es mi artículo. Este es mi artículo. Este es mi artículo.
            Este es mi artículo. Este es mi artículo. Este es mi artículo. Este es mi artículo.
            Este es mi artículo. Este es mi artículo. Este es mi artículo. Este es mi artículo.
        </div>
    </div>
    
    <div id="articulo2">
        <a class="titular" >Artículo 2</a>
        <div>
            Este es mi artículo. Este es mi artículo. Este es mi artículo. Este es mi artículo.
            Este es mi artículo. Este es mi artículo. Este es mi artículo. Este es mi artículo.
            Este es mi artículo. Este es mi artículo. Este es mi artículo. Este es mi artículo.
            Este es mi artículo. Este es mi artículo. Este es mi artículo. Este es mi artículo.
        </div>
    </div>
    
    <div id="articulo3">
        <a class="titular" ><span class="white">Artículo 3</span></a>
        <div>
            Este es mi artículo. Este es mi artículo. Este es mi artículo. Este es mi artículo.
            Este es mi artículo. Este es mi artículo. Este es mi artículo. Este es mi artículo.
            Este es mi artículo. Este es mi artículo. Este es mi artículo. Este es mi artículo.
            Este es mi artículo. Este es mi artículo. Este es mi artículo. Este es mi artículo.
        </div>
    </div>
</div>
<div id="firma">Deirdre para Foros del Web</div>
</body>
</html>

Bye

loncho_rojas · #9 (**permalink**) 24/09/2009, 18:06

Una solucon sencilla puede ser

Código HTML:

<script type="tex/javascript">
function MostrarOcultarMenu(pNombreDiv)
		{
			var subMenu=document.getElementById(pNombreDiv);

			if(subMenu.style.display=="none")
			{
			subMenu.style.display="block";
			}else{
			subMenu.style.display="none";
			}
		}
</script>

......


<body>

<div style="margin-bottom:10px;">
        <a href="javascript:;" onClick="MostrarOcultarMenu('texto1');">
        - Desplegar contenido 1
        </a>
</div>

<div style="display:none; margin-top:0px;" id="texto1">
Aca va el texto o lo que sea
</div>


<div style="margin-bottom:10px;">
        <a href="javascript:;" onClick="MostrarOcultarMenu('texto1');">
        - Desplegar contenido 2
        </a>
</div>

<div style="display:none; margin-top:0px;" id="texto2">
Aca va el texto o lo que sea
</div>

asi sucesivamente....