Mostrar e Ocultar Conteúdo

jeffersonlima23 · Setembro 10, 2014

Boa noite,

Galera por gentileza vocês pode me ajudar com um problema?

Estou aplicando o efeito de mostrar e ocultar texto, na primeira div=link_abrir_texto funciona normal, mas se tento criar outra div=link_abrir_texto2 ela não recebe o efeito de mostrar e ocultar, abaixo o conteúdo da página.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="all">
#mostrar {
    text-decoration:none;
    width:auto;
    margin:0 ;
    text-align:justify;
    font:12px/1.4 Arial, Helvetica, sans-serif;
    }
#ocultar {
    text-decoration:none;
    float:right


}

</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script>

$(document).ready(function(){
                            $('#texto1').hide();
                            $('#mostrar').click(function(event){
                                event.preventDefault();
                                $("#texto1").show("slow");
                            });
                            
                            
                            $('#ocultar').click(function(event){
                                event.preventDefault();
                                $("#texto1").hide("slow");
                            });
});
</script>
</head>

<body>
<div id="link_abrir_texto">
    <br>
<a href="#" class="link" id="mostrar">Clique aqui</a><br /><br />
</div>
<div id="texto1">
       <h1 class="titulo">Teste de texto</h1>
        <p class="texto_info">Bla, bla, bla,Bla, bla, bla,, bla, bla,, bla, bla,, bla, bla,
        , bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla,
        , bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla.</p>
    <br>
       <a href="#" id="ocultar" class="link">Topo</a><br /><br />
       </div>
       
       <div id="link_abrir_texto2">
    <br>
<a href="#" class="link" id="mostrar">Clique aqui 2</a><br /><br />
</div>
<div id="texto1">
       <h1 class="titulo">Teste de texto 2</h1>
        <p class="texto_info">Bla, bla, bla,Bla, bla, bla,, bla, bla,, bla, bla,, bla, bla,
        , bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla,
        , bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla.</p>
    <br>
       <a href="#" id="ocultar" class="link">Topo</a><br /><br />
       </div>
       
               
</body>
</html>

Agradeço a todos que puderem me ajudar.

Gabriel Takashi Katakura · Setembro 10, 2014

Você está usando dois elementos em uma página, onde ambos os elementos tem o mesmo id.

O atributo id foi feito para ser único por página, tanto que no JQuery se você buscar por $("#id"), ele retornará o primeiro elemento que ele encontrar na página que tenha id igual ao informado pelo parâmetro.

Para solucionar esse problema, troque id para uma class e use $(".class") para buscar os objetos referentes ao class procurado na página.

jeffersonlima23 · Setembro 10, 2014

OK, Gabriel vou fazer os teste e retorno assim que terminar, muito grato.

Gabriel, não querendo abusar, mas quando você disse para criar uma class ao inves de usar uma id, eu deveria trocar a <div id="link_abrir_texto"> para <div class="link_abrir_texto"> e usar o $(".class") no inicio do meu script assim:

$(document).ready(function(){
$(".class");
$('#texto1').hide();
$('#mostrar').click(function(event){
event.preventDefault();
$("#texto1").show("slow");
});

$('#ocultar').click(function(event){
event.preventDefault();
$("#texto1").hide("slow");
});
});
</script>

Ou seria de outra forma, desculpa mas estou meio perdido, e agradeço a sua colaboração.!

jeffersonlima23 · Setembro 10, 2014

Você está usando dois elementos em uma página, onde ambos os elementos tem o mesmo id.

O atributo id foi feito para ser único por página, tanto que no JQuery se você buscar por $("#id"), ele retornará o primeiro elemento que ele encontrar na página que tenha id igual ao informado pelo parâmetro.

Para solucionar esse problema, troque id para uma class e use $(".class") para buscar os objetos referentes ao class procurado na página.

OK, Gabriel vou fazer os teste e retorno assim que terminar, muito grato.

Gabriel, não querendo abusar, mas quando você disse para criar uma class ao inves de usar uma id, eu deveria trocar a <div id="link_abrir_texto"> para <div class="link_abrir_texto"> e usar o $(".class") no inicio do meu script assim:

$(document).ready(function(){

$(".class");

$('#texto1').hide();

$('#mostrar').click(function(event){

event.preventDefault();

$("#texto1").show("slow");

});

$('#ocultar').click(function(event){

event.preventDefault();

$("#texto1").hide("slow");

});

</script>

Ou seria de outra forma, desculpa mas estou meio perdido, e agradeço a sua colaboração.!

gpontes · Setembro 10, 2014

Não cara, você realmente não entendeu.

Você sabe o que é id ou class? Sabe o que é CSS Selector?

Estude isso primeiro, depois você faz isso sem precisar de ajuda.

jeffersonlima23 · Setembro 10, 2014

Não cara, você realmente não entendeu.

Você sabe o que é id ou class? Sabe o que é CSS Selector?

Estude isso primeiro, depois você faz isso sem precisar de ajuda.

Aqui é um fórum para ajudar as pessoas que não sabem, se você já tem todo o conhecimento por gentileza evite entrar em tópicos para expressar as suas ideias, pois pessoas assim igual a você tem muitos, mas poucos tem a arte de ensinar. E você realmente não é um deles. Mas mesmo assim muito grato pela sua incompetência de ajudar as pessoas. Boa noite!

Alex Habilidade · Setembro 10, 2014

Olá Jefferson tudo bem?

Andei testando o seu código, você está no caminho certo simplesmente alterei src do script e o seu botão de ocultar funcionou, faça o teste:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
 
$(document).ready(function(){
                            $('#texto1').hide();
                            $('#mostrar').click(function(event){
                                event.preventDefault();
                                $("#texto1").show("slow");
                            });
                            
                            
                            $('#ocultar').click(function(event){
                                event.preventDefault();
                                $("#texto1").hide("slow");
                            });
});
</script>
<style type="text/css" media="all">
#mostrar {
    text-decoration:none;
    width:auto;
    margin:0 ;
    text-align:justify;
    font:12px/1.4 Arial, Helvetica, sans-serif;
    }
#ocultar {
    text-decoration:none;
    float:right
 
 
}
 
</style>
</head>
 
<body>
<div id="link_abrir_texto">
    <br>
<a href="#" class="link" id="mostrar">Clique aqui</a><br /><br />
</div>
<div id="texto1">
       <h1 class="titulo">Teste de texto</h1>
        <p class="texto_info">Bla, bla, bla,Bla, bla, bla,, bla, bla,, bla, bla,, bla, bla,
        , bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla,
        , bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla.</p>
    <br>
       <a href="#" id="ocultar" class="link">Topo</a><br /><br />
       </div>
       
       <div id="link_abrir_texto2">
    <br>
<a href="#" class="link" id="mostrar">Clique aqui 2</a><br /><br />
</div>
<div id="texto1">
       <h1 class="titulo">Teste de texto 2</h1>
        <p class="texto_info">Bla, bla, bla,Bla, bla, bla,, bla, bla,, bla, bla,, bla, bla,
        , bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla,
        , bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla.</p>
    <br>
       <a href="#" id="ocultar" class="link">Topo</a><br /><br />
       </div>
       
               
</body>
</html>

jeffersonlima23 · Setembro 10, 2014

Boa noite, Alex, muito grato pelo retorno, porém executei o seu código e ele aplica para a primeira div mas não para segunda. Quando executo o debug o "clique aqui" recebe o efeito mas o "clique aqui2" já vem com o conteúdo visivel. O Gabriel disse para utilizar class ao invés de id pois existem duas com o mesmo nome. Você saberia fazer da forma que ele citou?

Alex Habilidade · Setembro 10, 2014

Olá amigo tudo bem?

Troque por este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
 
$(document).ready(function(){
                            $('#texto1').hide();
                            $('#mostrar').click(function(event){
                                event.preventDefault();
                                $("#texto1").show("slow");
                            });
                            
                            
                            $('#mostrar2').click(function(event){
                                event.preventDefault();
                                $("#texto2").hide("slow");
                            });
});
</script>
<style type="text/css" media="all">
#mostrar {
    text-decoration:none;
    width:auto;
    margin:0 ;
    text-align:justify;
    font:12px/1.4 Arial, Helvetica, sans-serif;
    }
#ocultar {
    text-decoration:none;
    float:right
 
 
}
 
</style>
</head>
 
<body>
<div id="link_abrir_texto">
    <br>
<a href="#" class="link" id="mostrar">Clique aqui</a><br /><br />
</div>
<div id="texto1">
       <h1 class="titulo">Teste de texto</h1>
        <p class="texto_info">Bla, bla, bla,Bla, bla, bla,, bla, bla,, bla, bla,, bla, bla,
        , bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla,
        , bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla.</p>
    <br>
       <a href="#" id="ocultar" class="link">Topo</a><br /><br />
       </div>
       
       <div id="link_abrir_texto2">
    <br>
<a href="#" class="link" id="mostrar2">Clique aqui 2</a><br /><br />
</div>
<div id="texto2">
       <h1 class="titulo">Teste de texto 2</h1>
        <p class="texto_info">Bla, bla, bla,Bla, bla, bla,, bla, bla,, bla, bla,, bla, bla,
        , bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla,
        , bla, bla,, bla, bla,, bla, bla,, bla, bla,, bla, bla.</p>
    <br>
       <a href="#" id="ocultar" class="link">Topo</a><br /><br />
       </div>
       
               
</body>
</html>

Veja o código logo abaixo e peço que guarde ele pois vamos precisar dele mais pra baixo da minha explicação.:

                            $('#ocultar').click(function(event){
                                event.preventDefault();
                                $("#texto2").hide("slow");
                            });

Veja que nessa parte eu fiz uma modificação na id:

<a href="#" class="link" id="mostrar2">Clique aqui 2</a><br /><br />

Não aconselho usar a mesma id em outros locais, pois ela é trabalhada unicamente. Agora lembre do código que eu disse para o senhor guardar? Veja que alterei o ocultar pelo mostrar:

                            $('#mostrar2').click(function(event){
                                event.preventDefault();
                                $("#texto2").hide("slow");
                            });

Espero que seja isto amigo :)

gpontes · Setembro 11, 2014

Cara, acho que é interessante primeiro você aprender o básico, antes de querer fazer algo que não sabe, entendeu?
As vezes é melhor dar a vara para pescar do que dar o peixe.

Abs.

William Bruno · Setembro 11, 2014

Segue mais uma opção:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.text').hide();
    $('.action-show').on('click', function(event){
        var href = $(this).attr('href');
        event.preventDefault();
        $(href).show("slow");
    });
});
</script>
<style type="text/css" media="all">
.text {
    text-decoration:none;
    width:auto;
    margin:0 ;
    text-align:justify;
    font:12px/1.4 Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>

    <a href="#text1" class="action-show">Clique aqui</a><br /><br />
    <div class="text" id="text1">
        <h1 class="text-title">Teste de texto</h1>
        <p class="text-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus mollitia, sapiente perspiciatis delectus distinctio ipsa iusto soluta consequatur autem possimus quisquam ducimus, labore dolor architecto tempora. Amet non cupiditate tempora! </p>
    </div><!-- .text -->

    <a href="#text2" class="action-show">Clique aqui</a><br /><br />
    <div class="text" id="text2">
        <h1 class="text-title">Teste de texto</h1>
        <p class="text-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus mollitia, sapiente perspiciatis delectus distinctio ipsa iusto soluta consequatur autem possimus quisquam ducimus, labore dolor architecto tempora. Amet non cupiditate tempora! </p>
    </div><!-- .text -->

    <a href="#text3" class="action-show">Clique aqui</a><br /><br />
    <div class="text" id="text3">
        <h1 class="text-title">Teste de texto</h1>
        <p class="text-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus mollitia, sapiente perspiciatis delectus distinctio ipsa iusto soluta consequatur autem possimus quisquam ducimus, labore dolor architecto tempora. Amet non cupiditate tempora! </p>
    </div><!-- .text -->

    <a href="#text4" class="action-show">Clique aqui</a><br /><br />
    <div class="text" id="text4">
        <h1 class="text-title">Teste de texto</h1>
        <p class="text-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus mollitia, sapiente perspiciatis delectus distinctio ipsa iusto soluta consequatur autem possimus quisquam ducimus, labore dolor architecto tempora. Amet non cupiditate tempora! </p>
    </div><!-- .text -->
</body>
</html>

note que a mágica está em deixar o ID da div que vc quer abrir, como HREF do link que vai ser clicado. Assim consigo ussar uma única função, para abrir N's elementos.

Gabriel Takashi Katakura · Setembro 11, 2014

Troque esse trecho de código:

$(document).ready(function()
{
    $('#texto1').hide();
    $('#mostrar').click(function(event){
        event.preventDefault();
        $("#texto1").show("slow");
    });
                            
                            
    $('#ocultar').click(function(event){
        event.preventDefault();
        $("#texto1").hide("slow");
    });
});

Por este:

$(document).ready(function()
{
    $('.texto1').hide();
    $('#mostrar').click(function(event){
        event.preventDefault();
        $(".texto1").show("slow");
    });
                            
                            
    $('#ocultar').click(function(event){
        event.preventDefault();
        $(".texto1").hide("slow");
    });
})

Também troque isso:

<div id="texto1">

Por isso:

<div class="texto1">

Pesquise na net por jQuery Selector e CSS Selector.

Um link que lhe ajudará um pouco para entender o conceito de forma sutil:

http://www.w3schools.com/jquery/jquery_ref_selectors.asp

jeffersonlima23 · Setembro 11, 2014

agradeço Alex, vou fazer os teste e retorno assim que finalizar.

Gabriel, muito grato pelo retorno, vou fazer os testes ao concluir posto os resultado! Valeu meu caro.

William, muito grato pelo retorno, vou fazer os testes ao concluir posto os resultado! Valeu meu caro.

jeffersonlima23 · Setembro 12, 2014

Humildemente agradeço a todos por me ajudar nesse quesito, com todos os exemplos disponibilizados consegui ajustar o código para mais de uma class.

Todos os modelos funcionaram!

Obrigado a todos.

Arquivado

Mostrar e Ocultar Conteúdo

Recommended Posts

jeffersonlima23 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gabriel Takashi Katakura 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

jeffersonlima23 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

jeffersonlima23 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gpontes 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

jeffersonlima23 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alex Habilidade 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

jeffersonlima23 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alex Habilidade 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

gpontes 9

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gabriel Takashi Katakura 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

jeffersonlima23 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

jeffersonlima23 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante