Limitar lista <ul> mostrar solo 6 y al dar click mustra las otras

metcom · #1 (**permalink**) 30/12/2010, 08:52

Hola nesecito algo simple con javascript, pero no se mucho de java si de php
estoy creando un script en php , y necesito esto

- Autos
- - Ferrari
- - Ferrari2
- - Ferrari3
- - Ferrari4
- - Ferrari5
- - Ferrari6

<-- Hacer un limite hasta aquí -->
Y poner un enlace para abrir y cuando abra que cambie a cerrar, se que varios pueden hacerlo , he aqui un demo http://shop.ebay.com/allcategories/all-categories

- - Ferrari7
- - Ferrari8

doylelives · #2 (**permalink**) 30/12/2010, 11:39

La propiedad display me permite ocultar/mostrar un elemento. En la siguiente pagina dan un ejemplo que se puede adaptar a tus necesidades.
http://www.tutorio.com/tutorial/java...expanding-menu

Perr0 · #3 (**permalink**) 30/12/2010, 12:24

Mira hice un modelo, funciona, solo lo probe en IE y FF, me dices como anda,
les quite las viñetas a propósito a las listas con

Código HTML:

<style>
li{list-style:none;}
</style>

porque al ocultarlas y luego mostrarlas no aparecian, bueno tarea para la casa

salu2

Código HTML:

Ver original<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<style>
li{list-style:none;}
</style>
<script>
var limite_lista=6; //INDICA ELEMENTOS A MOSTRAR
var valb=["Mostrar","Ocultar"];
 
function op(o,v){
    num=o.replace(/\D/g,'');
    document.getElementById("bot"+num).value=(v==valb[0])? valb[1]:valb[0];
    x=document.getElementById("lista"+num).getElementsByTagName("li")
    for(n=limite_lista;n<x.length;n++){
        estado=x.item(n).style;
        if(estado.display=="none")
        estado.display="block";
        else
        estado.display="none";
    }
}
 
window.onload=function(){
    contLista=document.getElementsByTagName("ul")
    for(i=0;i<contLista.length;i++){
        contLista.item(i).id="lista"+i;
        lista=contLista.item(i).getElementsByTagName("li");
        for(j=0;j<lista.length;j++)
        if(j>=limite_lista) lista.item(j).style.display="none";
        var boton=document.createElement("input");
        boton.type="button";
        boton.value=valb[0];
        boton.id="bot"+i;
        boton.onclick=function(){op(this.id,this.value)};
        document.getElementById("lista"+i).appendChild(boton);
    }
}
</script>
</head>
 
<body>
Autos Ferrari
<ul>
    <li>Ferrari1</li>
    <li>Ferrari2</li>
    <li>Ferrari3</li>
    <li>Ferrari4</li>
    <li>Ferrari5</li>
    <li>Ferrari6</li>
    <li>Ferrari7</li>
    <li>Ferrari8</li>
    <li>Ferrari9</li>
    <li>Ferrari10</li>
    <li>Ferrari11</li>
    <li>Ferrari12</li>
</ul>
 
Autos Lexus
<ul>
    <li>Lexus1</li>
    <li>Lexus2</li>
    <li>Lexus3</li>
    <li>Lexus4</li>
    <li>Lexus5</li>
    <li>Lexus6</li>
    <li>Lexus7</li>
    <li>Lexus8</li>
    <li>Lexus9</li>
    <li>Lexus10</li>
    <li>Lexus11</li>
    <li>Lexus12</li>
</ul>
</body>
</html>

Salu2