Jquery Jquery - addClass() e removeClass()

[Jonathan Djavan 2]

Opa, pessoal, estou com uma pequeno problema, estou começando a me aventurar no mundo Jquery e ainda sei pouco de JavaScript, talvez um erro, deveria saber mais de JavaScript, pra depois aprender Jquery, mas enfim, vamos a duvida.

 

Tenho um elemento que quando eu clico ele precisa mudar de classe, mas quero que quando eu clicar de novo nele, ele volte para classe antiga, com o pouco que sei, já tentei, mas não acontece o que quero.

 

Exemplificando melhor

 

Tenho um botão de "+" que ao clicar ele fica "-", até ai consigo fazer sem nenhum problema, o que não consigo é retirar a classe que coloquei e voltar ele para o "+".

 

Ao clicar no "+" uma caixa com slideToggle() se abre e ao clicar de novo, logicamente ela fecha, mas no script que fiz o botão de "-" continua menos e não volta a ficar "+".

 

Como faço para resolver isso?! Alguém poderia me ajudar e explicar o script que faça dá certo?!

 

Meu script:

 

$(".more-info").click(function () {

$(".box-info").slideToggle('slow');

$(".more-info").removeClass("more-info").addClass("less-info");

});

 

Já tentei fazer outro script para quando clicar no botão com a classe nova ele voltar a antiga, mas não funcionou, talvez porque tenha feito errado.

 

segue o outro script:

 

$(".less-info").click(function () {

$(".box-info").slideToggle('slow');

$(".less-info").removeClass("less-info").addClass("more-info");

});

 

Bem é isso, espero que tenham conseguido me entender e que consiga ser solucionado esse caso e assim aprenda algo novo. Valeu gente!

[Sergio Tomas 16]

Olá Jonathan, tente usar:

$(".less-info").toggleClass("more-info")

Uma dica: Na hora de estilizar coloque por padrão esse botão com estilo "+" e ao adicionar a classe "more-info", ele fica "-" ao inves de ter duas classes "less-info" e "more-info" pois ai facilita na hora de usar o toggleClass

[Jonathan Djavan 2]

Sergio, valeu, vou tentar, mas ele já está como padrão como more-info, que no caso é o +, mas espero que funcione, vou testar e volto para dá uma resposta. Valeu a força!

[Sergio Tomas 16]

Sergio, valeu, vou tentar, mas ele já está como padrão como more-info, que no caso é o +, mas espero que funcione, vou testar e volto para dá uma resposta. Valeu a força!

 

Se ele tiver como padrão você inverte

 

$(".more-info").toggleClass("less-info")

[Jonathan Djavan 2]

Pensei justamente isso, massa, ainda não tive tempo de testar, mas creio que vai dá certo, mas acho que vai acontecer um problema, tem vários elementos desse na mesma page, quando clicar todos vão mudar ,ainda sei pouco de Jquery, mas creio que vai rolar isso, porque acho que tenho que criar alguma function ou usar alguma outra coisa pra complementar e só abrir aquele que cliquei com um (this) talvez?! Enfim, valeu mesmo a força, acho que vai dá certo o/

[Sergio Tomas 16]

Fala Jonathan blz, isso mesmo vc vai usar o $(this);

$(this).toggleClass("less-info")

O $(this) referencia ao botão que vc clicou quando está dentro de um evento. abraços!