4

Olá, Estou criando um sistema em Javascript, onde preciso que um botão mostre apenas os parágrafos com determinada classe em uma div com conteúdo escondido.

Exemplo:

 <button id="btn1">Abre classe1</button>
 <div id="conteudo">
     <p class="classe1">Teste1</p>
     <p class="classe1">Teste2</p>
     <p class="classe2">Teste3</p>
 </div>

Gostaria que quando esse botão fosse clicado, a div carregasse apenas o texto Teste1 e Teste2. É possível?

Obrigada.

3
  • O que quer dizer com "mostre apenas"? Esse conteudo vai estar escondido? ou deve ser mostrado noutro elemento?
    – Sergio
    24/07/2014 às 21:18
  • Isto, é uma div com conteúdo escondido.
    – mealine
    24/07/2014 às 21:20
  • O que está escondido, a div inteira ou o que está dentro dela? Pode incluir essa parte do seu CSS na pergunta?
    – bfavaretto
    24/07/2014 às 21:22

2 Respostas 2

3

Para mostrar esses elementos com a classe que quer pode usar assim: http://jsfiddle.net/caYtr/

$('#btn1').on('click', function(){
    $('#conteudo p.classe1').show();
});

Estou a assumir que tem um CSS assim:

#conteudo p {
    display: none;
}

Porém seria util adicionar mais informação a esse button para criar código mais generalista e não tão localizado, no caso de haver botôes que mostrem outras classes.

Podia por exemplo juntar um campo data-classe onde juntava o nome exato da classe que esse botão devia mostrar.

Assim: http://jsfiddle.net/caYtr/2/

HTML

<button id="btn1" data-classe="classe1">Abre classe1</button>
<button id="btn2" data-classe="classe2">Abre classe2</button>
<div id="conteudo">
    <p class="classe1">Teste1</p>
    <p class="classe1">Teste2</p>
    <p class="classe2">Teste3</p>
</div>

JavaScript/jQuery

$('button').on('click', function () {
    var classe = $(this).data('classe');
    $('#conteudo p.' + classe).show();
});

E neste caso o javascript não precisa mais de mudar, independentemente de ter mais 20 classes diferentes.

2

Se todo conteúdo fica oculto e é exibido somente no click do botão, você pode fazer

Demo: JSFiddle

Exemplo:

CSS

/*oculta todos os parágrafos dentro da div conteúdo*/
#conteudo p {display:none;} 

jQuery

//Ao clicar no botão com id #btn1, exibe os parágrafos com .classe1
$('#btn1').click(function(){
    $('p.classe1').show('slow');
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .