[Ajuda] Box Linhas Ocultas

[Mazzonif]

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.

[Roger Mauricio Takemiya]

É css com javascript amigo...

segue o exemplo

<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>

[Mazzonif]

cara, seguinte, ele aumenta a caixa e diminui,

mas o problema é que ele não oculta as linhas, apenas aumenta e diminui o tamanho da caixa e texto das linhas fica aparecendo, não limitando a exibição de "3 linhas".

esta conforme a figura abaixo:

agora não sei se estou fazendo algo errado ou é assim mesmo.

Editado Março 23, 2012 por Mazzonif

[Mazzonif]

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

obrigado para meu amigo Roger que tentou me ajudar, infelizmente não serviu mas fica minha gratidao.

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’);
 })

});

Editado Março 26, 2012 por Mazzonif