Estou iniciando e preciso de ajuda com um codigo javascript!

[ewertonribeiro]

Estou tentando usar o FOREACH para fazer com que ao clicar na minha variavel span eu adicione uma classe a uma variavel texto,porem ao condicionar e colocar as açoes que ira executar eu so consigo mexer na variavel span que esta definida no foreach e eu nao cnsigo adicionar em todos os paragragos a classe aparecer(descrita no style).Preciso de ajuda mesmo.Alguem sabe me dizer o que esta errado no meu codigo?Ou uma outra forma de executar essa açao sem usasr nenhum framework e so com javascript?

<style> /* .box{ width:200px; height: 200px; background-color:red; margin-left: 0; } .animEsquerda{ transition:1s; margin-left: 90px; margin-top:20px; background-color: green; } */ .conteudo h2 span{ font-size: 13px; cursor: pointer; }

        .conteudo p{
            overflow:hidden;
            height:10px;
            transition:1s;
        }
        .font{font-size: 13px;}
        
        .aparecer{

        height:200px !important;
        }
        
    </style>
    <!--<div class="box"></div>-->
    <div class="conteudo">
        <h2>Titulo do conteúdo <span>Ver mais!</span></h2>
        <p class="id">Lorem ipsum dolor sit amet, c
            onsectetur adipiscing elit. In interdum n
            eque ac laoreet iaculis. Cras et dictum au
           iet nulla ac feugiat rutrum.</p>
    </div>
    <div class="conteudo">
        <h2>Titulo do conteúdo <span>Ver mais!</span></h2>
        <p>Lorem ipsum dolor sit amet, c
            onsectetur adipiscing elit. In interdum n
            eque ac laoreet iaculis. Cras et dictum au
            g. 
               Donec sit amet bibendum tellus. Vivamus imperdiet nulla ac feugiat rutrum.</p>
    </div>
    <div class="conteudo">
        <h2>Titulo do conteúdo <span>Ver mais!</span></h2>
        <p>Lorem ipsum dolor sit amet, c
            onsectetur adipiscing elit. In interdum n
           t non accumsan
              convallis. Proin nec tempus ante. Quisque justo justo, 
              ittis id mauris id, tincidunt lobortis erat. Aenean
               quis consequat metus, nec fringilla tortor. 
               Donec sit amet bibendum tellus. Vivamus imperdiet nulla ac feugiat rutrum.</p>
    </div>
    <div class="conteudo">
        <h2>Titulo do conteúdo <span id="id">Ver mais!</span></h2>
        <p>Lorem ipsum dolor sit amet, cn
               quis consequat metus, nec fringilla tortor. 
               Donec sit amet bibendum tellus. Vivamus imperdiet nulla ac feugiat rutrum.</p>
    </div>
    <script>
       

       
   var span = document.querySelectorAll(".conteudo span")
  

    span.forEach((span)=>{
        var texto = document.querySelectorAll(".conteudo p");
           addEventListener("click",()=>{
        
        
           if(span.classList.contains("font")){
            span.innerHTML = "Ver Mais!"; 
            span.classList.remove("font")
           }else{
               span.innerHTML="Ocultar!";
               span.classList.add("font");
               texto.classList.add("aparecer")
           }
           })
       })
       
    </script>
</body>

[wmartins]

Bom dia @ewertonribeiro! Vou te ajudar com esse caso, qualquer dúvida a mais que tiver, fica à vontade para enviar mais perguntas.

Para começar, eu tomei a liberdade de colocar o teu código no https://jsfiddle.net. Isso ajuda para que outras pessoas possam executar o mesmo código que tu mais facilmente. O link ficou disponível em https://jsfiddle.net/9xwhvq5b/1/.

Dei uma olhada no teu código e tem algumas coisinhas que podemos entender juntos. Primeiro, só confirmando, esse é um exemplo da execução:

Nesse GIF, podemos ver que, ao clicar em Ver Mais!, todos os Ver Mais! na tela viram Ocultar!, além do conteúdo em si não ser exibido. Tem um outro detalhe bem importante para notar, se tu cliar em qualquer lugar na tela, também vai acontecer esse comportamento. Isso é importante para a nossa próxima parte.

Olhando a ideia que tu teve com o forEach

var span = document.querySelectorAll(".conteudo span")

span.forEach((span)=>{
  var texto = document.querySelectorAll(".conteudo p");
    addEventListener("click",()=>{

Está quase tudo certo, mas vamos olhar no detalhe mais algumas coisas.

Para começar, quando tu executa addEventListener("click", () => { ... }) sem especificar para qual elemento tu quer adicionar o evento de click, é o mesmo que adicionar o evento direto no objeto window. E isso explica o motivo de, ao clicar em qualquer área na tela, todos os Ver Mais! mudarem para Ocultar. A solução é super simples, basta dizer qual elemento que tu gostaria que recebesse o evento. Nesse caso, cada um dos span do teu forEach:

var span = document.querySelectorAll(".conteudo span")

span.forEach((span)=>{
  var texto = document.querySelectorAll(".conteudo p");
    span.addEventListener("click",()=>{

(https://jsfiddle.net/9xwhvq5b/2/)

Se tu acessar esse último link, vai perceber que agora somente o Ver Mais! clicado tem o comportamento de mudar para Ocultar!, o que é um avanço comparado ao que tínhamos antes, porém, o conteúdo ainda não tem esse efeito de mostrar e esconder. O motivo disso acontecer se dá pela forma como tu está buscando o elemento <p>:

var texto = document.querySelectorAll(".conteudo p");

Repara que, ao invés de pegar o elemento <p> daquele único conteúdo clicado, tu está tentando pegar todos os elemento <p> de todos os .conteudo. Uma forma de resolver é acessar esse elemento a partir do <span> clicado. O browser tem algumas APIs que te permitem buscar os elementos acima na árvore de elementos:

    var conteudo = span.parentElement.parentElement;
    var texto = conteudo.querySelector("p");

Nesse caso, a partir do span, estamos buscando dois elementos "acima" na árvore de elementos, o que nos leva até <div class="conteudo"> e, a partir dela, buscamos o elemento <p>. Nesse caso, somente um elemento <p> (note o uso de querySelector ao invés de querySelectorAll).

(https://jsfiddle.net/9xwhvq5b/3/)

Se acessar esse último link, vai perceber que o conteúdo é mostrado quando clica em Ver Mais!, porém, ele não é escondido. Então, para finalizar, a única coisa que faltou foi remover a classe aparecer do texto:

span.addEventListener("click", () => {
  if (span.classList.contains("font")) {
    span.innerHTML = "Ver Mais!";
    span.classList.remove("font");
    texto.classList.remove("aparecer")
  } else {
    span.innerHTML = "Ocultar!";
    span.classList.add("font");
    texto.classList.add("aparecer")
  }
})

(https://jsfiddle.net/9xwhvq5b/4/)

Resultado final:

Só para passar pelas tuas perguntas:

Alguem sabe me dizer o que esta errado no meu codigo?

Acho que conseguimos passar por vários pequenos ajustes, mas no geral, teu código estava no caminho certo!

Ou uma outra forma de executar essa açao sem usasr nenhum framework e so com javascript?

Pelo que pude ver, o teu código já é executado sem nenhum framework e só com JavaScript/CSS.

---

Espero ter conseguido ajudar, caso tenha alguma outra dúvida é só mandar aqui!

[ewertonribeiro]

Nossa muito obrigado mesmo.Aprendi muito com isso,valeu mesmo.