[Resolvido] Ocultar linhas

[mazzonif 0]

Olá pessoal, estou precisando de uma grande ajuda.

 

Desculpe caso esteja postando no lugar errado.

 

Preciso criar uma box que tenha 10 linhas mas apareça apenas 2 no maximo, caso e um sinal de + ou palavra mais, e quando clicar no sinal ele amplia e aparece as 10 linhas +/-.

tentei fazer um desenho mas sou muito ruim de desenho, ainda mais em paint :rolleyes: saiu isso ai.

 

caso não tenha entendido me falem que tento me expressar melhor.

 

 

eu consegui esse codigo:

<script>

function maisMenos(){

   var el    = document.getElementById("box");
   var ellbx = document.getElementById("lbx");

   if(el.style.height== "100px"){
       el.style.height = "200px";
       ellbx.innerHTML = "menos";
   }else{
       el.style.height = "100px";
       ellbx.innerHTML = "mais";
   }

}
</script>


   <div id="box" style="height:100px; width:100px; border:thin solid; border-color:#CECECE;"><a onclick="maisMenos()"><span id="lbx">mais</span></a></div>

 

porem quando eu faço (nao sei se estou fazendo algo errado) e ele nao oculta as linhas, ela diminui e aumenta a caixa mas nao oculta as linhas ficando conforme demonstra a imagem a seguir:

 

 

 

nao sei se estou errando algo o oq, por favor alguem poderia me ajudar?

[mazzonif 0]

bom pessoal, achei uma solução para meu problema utilizando jquery.

 

Obrigado a todos que perderam tempo lendo meu post!

 

seguem os codigos:

 

CSS e HTML

body {
font: 12px Verdana, Geneva, sans-serif;

}
#conteudo {
border:1px solid #CCCC33;
padding:10px;
margin-top:10px;
width:500px;
}



<a id="exibir" href="#">Exibir DIV</a>
<div id="conteudo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar, enim ac hendrerit mattis, lorem mauris vestibulum tellus, nec porttitor diam nunc tempor dui. Aenean orci. Sed tempor diam eget tortor. Maecenas quis lorem. Nullam semper. Fusce adipiscing tellus non enim volutpat malesuada. Cras urna. Vivamus massa metus, tempus et, fermentum et, aliquet accumsan, lectus. Maecenas iaculis elit eget ipsum cursus lacinia. Mauris pulvinar.

<a id="ocultar" href="#">Ocultar DIV</a>
</div>

 

Jquery:

 

$(document).ready(function(){

$(‘#conteudo’).hide();

$(‘a#exibir’).click(function(){

$(‘#conteudo’).show(‘slow’);

});

$(‘a#ocultar’).click(function(){

$(‘#conteudo’).hide(‘slow’);
})

});