Show/Hide
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Como conseguir esta funcionalidade:
- Definir estilos CSS no template
- Definir bloco de código javascript dentro do header desse template
- Criar no post a seguinte estrutura
Customize->Template->Edit HTML
.posthidden {display:none}
.postshown {display:inline}
«script type='text/Javascript'»
function expandcollapse(postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
«/script»
Resultado Final é algo deste género
«a onclick="javascript:expandcollapse ('blck1')"»Show/Hide«/a»
«span id="blck1" class="posthide"»
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
Hide show hide show Hide show hide showHide show hide showHide show hide show
«/span»
NOTA: substituir o « por MenorQue e o » por MaiorQue devido a limitações do editor tive que os colocar desta forma para poderem ver código html
2 comments:
Depois de bastantes tentativas para conseguir por a mostrar no layout o código html direito, acabei por desistir e dar a volta ao editor :P.
Penso que esta funcionalidade será de alguma utilidade para quem costuma colocar posts de código entre outros ... spoilers por exemplo :D
Vá digam lá quem é amigo quem é ...
Eu normalmente nestes casos nem chego a usar CSS a não ser que já tenha um ficheiro CSS externo já com algumas definições
(não gosto das definições gerais nem locais de CSS :p).
Costumo utilizar algo que faz basicamente o mesmo mas só recorrendo ao javascript
document.getElementById('xpto').style.display="none";
document.getElementById('xpto').style.display="inline";
mas são ambas válidas :)
Post a Comment