Expandir texto --> Código HTML please

S

Sifu

Power Member
Boas pessoal

É o seguinte, partindo de um texto qualquer, por exemplo:

No passado dia 9, o Pavilhão Multiusos de Rio Maior acolheu o Seminário Internacional que contou com a presença do Grande Mestre Daniel Hayen (9º Dan de Shin Gi Tai Kempo) e do Sensei Jon (4º Dan) vindos da Bélgica. (ver Notícia)

O que eu quero fazer é, ao clicar na palavra "Ver notícia" se expandisse o resto da noticia para baixo:

No passado dia 9, o Pavilhão Multiusos de Rio Maior acolheu o Seminário Internacional que contou com a presença do Grande Mestre Daniel Hayen (9º Dan de Shin Gi Tai Kempo) e do Sensei Jon (4º Dan) vindos da Bélgica. (ver Notícia)

Trata-se de um evento de grande importância para a comunidade kempoca que reuniu mais de 300 atletas vindos de todo o País, incluindo a comitiva bragançana composta pelos atletas da Associação de Kempo Chinês de Bragança (AKCB).
Sendo uma associação sem fins lucrativos, a AKCB foi criada com o objectivo de dar a conhecer o Kempo Karate, no aspecto marcial e no âmbito curativo.
Assim, desde 2005, que aquela colectividade trabalha, de modo a levar os atletas a atingirem a perfeita harmonia entre espírito, mente e corpo.
Ao longo destes anos, a AKCB já foi reconhecida várias vezes em diversas competições, bem como em estágios nacionais e internacionais.

Alguém me pode ajudar?

Cumps
 
Já consegui implementar o codigo.
Mas nao consigo formatar o butao "more", basta mudar-lhe a cor para ele perder a funcionalidade...Help!!

CUmps :)
 
sergio.gomes disse:
boas,

qual o problema com o "botao" ?

podes colocar aqui o codigo HTML que estás a usar para o "botao" ? =)


nota: na realidade o "botao" é um elemento do tipo <div>.
Um botao (button) em html é outra coisa! mas para o efeito, isto n traz qualquer problema :)

----------------------------------------------------------------------------------------------------
edit: actualizei o codigo do primeiro 'botao' more para aparecer a vermelho
de:
PHP: 
  <div id = "MySubContent1_ToggleButton" (...) style = "cursor:pointer;">more</div>
para:
PHP: 
  <div id = "MySubContent1_ToggleButton" (...) style = "color:red; cursor:pointer;">more</div>
btw, tal como digo na pagina, so pretendi mostrar uma possivel solucao para o problema, focando *só* no javascript. Todos os problemas de cores, formas, estilos...podem ser resolvidos aplicando css, p. ex, num ficheiro à parte. Nao me preocupo com isso na pagina, aplico estilos directamente nos elementos..

@http://web.ist.utl.pt/sergio.gomes/jsdiv/jstest.htm

cumps e bom trabalho.
Clicar para expandir...

Já me estou a desenrascar bem..lol

Muito Obrigado
 
Boas,
Estou aqui com um pequeno problema, aquilo que eu tenho feito é isto:
-
(Campeonato Nacional de Kempo - 3 de Maio
Disputou-se Sábado dia 3 de Maio mais um Campeonato Nacional de Kempo Karaté Chinês desta vez em Óbidos. Com a participação de cerca de seicentos atletas vindos de todo o país, onze atletas representavam o Clube Desportivo Moitense, Hugo Rita, Hugo Santos, Cristino Malheiro, David Rosa, Pedro Moleiro, David Vicente, Rafael Gomes, Renato Alexandre, Rita Henriques, Luis Monteiro e Filipe Moleiro defenderam as cores Moitenses. Durante a manhã competiram os mais novos, desde cedo os atletas Moitenses começaram a dar nas vistas, com os mais pequenos a atingir logo bons resultados.

mais...)

Por estranho que pareça, não consigo encostar o butão "mais..." ao texto, por exemplo: blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
mais...

Já tentei de tudo, sempre que coloco o butão para cima ele perde as suas funcionalidades...Talvez haja uma maneira simples de fazer isto mas eu não estou a conseguir.

Alguém me pode ajudar?

Obrigado
 
Última edição pelo moderador:
MPalhas disse:
mostra o HTML e CSS desse texto.
Clicar para expandir...

<td width="800" height="339" valign="top" background="Imagens/Corpo da página.png">
<div style="width:800px; height:339px; overflow-y:auto;">
<p><font size="2" face="Segoe Print"><strong><font size="3">Campeonato
Nacional de Kempo - 3 de Maio</font><br>
Disputou-se Sábado dia 3 de Maio mais um Campeonato Nacional de Kempo
Karaté Chinês desta vez em Óbidos. Com a participação de cerca de seicentos
atletas vindos de todo o país, onze atletas representavam o Clube Desportivo
Moitense, Hugo Rita, Hugo Santos, Cristino Malheiro, David Rosa, Pedro
Moleiro, David Vicente, Rafael Gomes, Renato Alexandre, Rita Henriques,
Luis Monteiro e Filipe Moleiro defenderam as cores Moitenses. Durante
a manhã competiram os mais novos, desde cedo os atletas Moitenses começaram
a dar nas vistas, com os mais pequenos a atingir logo bons resultados.</strong></font></p>
<div id = "MySubContent1_ToggleButton" onclick = "toggleVisibility('MySubContent1_ToggleButton', 'MySubContent1')" style = "color:red; cursor:pointer;">mais...</div>
<div id = "MySubContent1" style = "display: none"/><br>
<p><font color="#000000" size="2" face="Segoe Print"><strong>Pedro Moleiro
revalidou o titulo de Campeão Nacional de Katas (formas), Vice-Campeão
em Katas (armas) onde competiu pela primeira vez e Vice-Campeão em Light
contact. David Vicente segundo lugar em light contact, Vice-Campeão
Nacional. Rafael Gomes uma boa prestação em light contact, onde venceu
um cambate. Este atleta participou pela primeira vez num campeonato
Nacional. Para a parte da tarde estavam reservadas a competições para
os seniores onde mais uma vez os atltetas Moitenses estiveram ao mais
alto nível. Rita Henriques terceiro lugar em light contact Luis Monteiro
terceiro lugar em light/full contact mais de 70Kg Filipe Moleiro revalidou
o titulo de Campeão Nacional em light/full contact menos de 70 Kg, ficou
em primeiro lugar em defesa pessoal, ficando em terceiro lugar em Katas
(armas). Estão de parabéns todos os atletas Moitenses que participaram
neste Campeonato Nacional não só pelos resultados obtidos mas, também
pela forma empenhada e digna com que representaram o Clube Desportivo
Moitense </strong></font></p>
</div><hr/>
<p><font size="2" face="Segoe Print"><strong><font size="3">Campeonato Nacional
de Kempo - 3 de Maio</font> <br>
Disputou-se Sábado dia 3 de Maio mais um Campeonato Nacional de Kempo
Karaté Chinês desta vez em Óbidos. Com a participação de cerca de seicentos
atletas vindos de todo o país, onze atletas representavam o Clube Desportivo
Moitense, Hugo Rita, Hugo Santos, Cristino Malheiro, David Rosa, Pedro
Moleiro, David Vicente, Rafael Gomes, Renato Alexandre, Rita Henriques,
Luis Monteiro e Filipe Moleiro defenderam as cores Moitenses. Durante
a manhã competiram os mais novos, desde cedo os atletas Moitenses começaram
a dar nas vistas, com os mais pequenos a atingir logo bons resultados</strong></font>
</p>
<div id = "MySubContent2_ToggleButton" onclick = "toggleVisibility('MySubContent2_ToggleButton', 'MySubContent2')" style = "color:red; cursor:pointer;">mais...</div>
<div id = "MySubContent2" style = "display: none"/>
<p><strong><font size="2" face="Segoe Print">Pedro Moleiro revalidou o titulo
de Campeão Nacional de Katas (formas), Vice-Campeão em Katas (armas) onde
competiu pela primeira vez e Vice-Campeão em Light contact. David Vicente
segundo lugar em light contact, Vice-Campeão Nacional. Rafael Gomes uma
boa prestação em light contact, onde venceu um cambate. Este atleta participou
pela primeira vez num campeonato Nacional. Para a parte da tarde estavam
reservadas a competições para os seniores onde mais uma vez os atltetas
Moitenses estiveram ao mais alto nível. Rita Henriques terceiro lugar
em light contact Luis Monteiro terceiro lugar em light/full contact mais
de 70Kg Filipe Moleiro revalidou o titulo de Campeão Nacional em light/full
contact menos de 70 Kg, ficou em primeiro lugar em defesa pessoal, ficando
em terceiro lugar em Katas (armas). Estão de parabéns todos os atletas
Moitenses que participaram neste Campeonato Nacional não só pelos resultados
obtidos mas, também pela forma empenhada e digna com que representaram
o Clube Desportivo Moitense </font></strong></p>
</div><hr/></td>

Aqui está.
 
Olá,

Para o que queres fazer basta algo neste género, rudimentar mas eficaz:

Código: 
<table>
<tr><td>texto que queres visível e o <span style="color:#ff0000; cursor:pointer" onclick="document.getElementById('expandir').style.display=''" >mais</span></td></tr>
<tr><td id="expandir" style="display:none;">texto que queres invisível ao início e depois expande que podes <span style="color:#ff0000; cursor:pointer" onclick="document.getElementById('expandir').style.display='none'">fechar</span></td></tr>
</table>
 
Ja me consegui desenrascar, também de forma rudimentar lol. Fui alterando o tipo de paragrafo entre cada linha, fui por tentativas e consegui safar-me ... pelo menos por agora. LOL

Obrigado a todos
 
Inicie sessão ou registe-se para poder participar.
Back
Topo