Jump to content
Chiceli

Toggles Javascript

Recommended Posts

Chiceli

Olá, bom dia pessoal.

Sou curiosa e estou a tentar aprender Javascript. Por acaso já há um tópico parecido ao meu, mas o código ainda é avançado para mim e infelizmente n pude perceber. 😳

A minha dificuldade é esconder e expandir um toggle fazendo com que a imagem mude (do tipo um mais quando o conteudo está escondido e menos quando está expandido). já consigo expandir e esconder o texto, mas para a imagem está um pouco complicado.

Toda a ajuda é bem-vinda, desde já agradecida.


<script type="text/javascript">
    function toggle(var1) 
    {
        var div1 = document.getElementById(var1)
        if (div1.style.display == 'none') {
            div1.style.display = 'inline'
        } else {
            div1.style.display = 'none'
        }
        
    }
    var var1= 'on';
    var imagem;
     window.onload = function () {
        imagem = document.getElementById('var1')
        document.getElementById('tbl1').onclick = function () {
            toggle();
            return false;
        }
        function toggle() {
        if (var1== 'on') {
            imagem.src="images/pause.gif";
            var1= 'off';
        }
        else {
            imagem.src="images/play.gif";
            var1= 'on';
       }
    }
    }
</script>

//codigo para esconder/expandir


Se a Terra não girasse, existiriam menos tontos no mundo?

Share this post


Link to post
Share on other sites
taviroquai

Experimenta assim... não testei... pode não funcionar à 1ª...

    function toggle(elemento, contentor) 
    {
        var imagem = document.getElementById(elemento);
        var div1 = document.getElementById(contentor);
        if (div1.style.display == 'none') {
            div1.style.display = 'inline';
            imagem.src = "images/pause.gif";
        } else {
            div1.style.display = 'none';
            imagem.src = "images/play.gif";
        }
    }
   
     window.onload = function () {
        imagem = document.getElementById('var1');
        imagem.onclick = function () {
            toggle('var1', 'tbl1');
            return false;
        }
    }

Basicamente tens 1 função que alterna (toggle) ao verificar se o contentor está visivel. E tens outra função que regista o evento click no elemento que desejas.

Outra forma de registar os eventos seria:

document.getElementById('var1').addEventListener('click',function() { toggle('var1', 'tbl1'); },false);

EDIT: se o elemento é uma div, então terás que usar a imagem de background, tipo: div.style.backgroundImage = 'url("imagem.png")';

Share this post


Link to post
Share on other sites
Chiceli

infelizmente não deu certo, mas obrigada pela dica 😎


Se a Terra não girasse, existiriam menos tontos no mundo?

Share this post


Link to post
Share on other sites
Chiceli

Não funciona com o Jquery. Vou investigar um pouco mais e depois volto a incomodar  :cheesygrin:

Obrigadaaaaaaaaaaa


Se a Terra não girasse, existiriam menos tontos no mundo?

Share this post


Link to post
Share on other sites
fil79

Sim, estuda um pouco de como funciona o Jquery, pois dá para fazer isso que pretendes


MCITP-MCTS-MCP

Share this post


Link to post
Share on other sites
taviroquai

Viva,

Estive a testar o javascript que coloquei no post anterior e funciona na perfeição para o seguinte html:

<img id="var1" src="images/play.gif" />
<div id="tbl1">contentor</div>

Mostra o teu html.

Share this post


Link to post
Share on other sites
Chiceli

<table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>

<td>

<a href='javascript: toggle("tbl1")'>

<img alt="Seguinte" src="scrollbar-mousein-downarrow.png" border="0" complete="complete"/>

</a>

</td>

<td>

<table style="display:inline" id="tbl1">

<tr>

<td>

<div>

Esconder e expandir o texto

<p>blá,blá,blá,blá</p>

<p>Teste, teste, teste, teste</p>

<p>Toggle, Toggle, Toggle</p>

<p>Javascript, javascript, javascript.</p>

</div>

</td>

</tr>

</table>

</td>

</tr>

</table>


Se a Terra não girasse, existiriam menos tontos no mundo?

Share this post


Link to post
Share on other sites
taviroquai

Para o javascript que indiquei, o html deve ser:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
         <td>
           <img id="var1" alt="Seguinte" src="scrollbar-mousein-downarrow.png" border="0" complete="complete"/>
         </td>
         <td>
            <table style="display:inline" id="tbl1">
               <tr>
                  <td>
                     <div>
                     Esconder e expandir o texto
                     <p>blá,blá,blá,blá</p>
                     <p>Teste, teste, teste, teste</p>
                     <p>Toggle, Toggle, Toggle</p>
                     <p>Javascript, javascript, javascript.</p>
                  </div>
                  </td>
               </tr>
            </table>
         </td>
      </tr>
   </table>    

É importante que entendas estas alterações... atenção que os caminhos para as imagens devem estar correctos senão não funciona.

Share this post


Link to post
Share on other sites
Chiceli

Funciona sim, mas não consigo ver a imagem pq não a tenho.

Ele expende e esconde o texto, mas n sei se a imagem muda pq n a posso ver, vou testar com outra imagem.

Muito obrigada  :cheesygrin:


Se a Terra não girasse, existiriam menos tontos no mundo?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.