Add or Remove Class from a DIV when clicking

Question

Add or Remove Class from a DIV when clicking

Navigation

#1 by (5 votes)
#2 by (3 votes)
#3 by (2 votes)

2

Hello everyone, I'm trying to make sure that when I press 1x in the ".PA" packages, it will make the changes:

add class .select
CSS: #bottaaoPA: Display: Block;
CSS: bottaaoPB: Display: None;
CSS: bottaaoPC: Display: None;

And when I press again it will remove the .select class

<div class="pacotes pa">
    <h1> PACOTE COMPLETO</h1>
    <h2 style="display:inline-block;margin-right:5px;">R$<b>2.500,</b></h2>
    <h6 style="display:inline-block;">00</h6>
    <div class="bloco-loja">
        <h1>Transfer</h1>
        <h2>(participante + bike)</h2>
        <h3>Vitória x Itaúnas<br> Praia das Neves x Vitória</h3>
    </div>
    <div class="bloco-loja">
        <h1 style="margin-bottom:5px;">Pousada/Hotel</h1>
        <h3>09 diárias c/ café da manhã</h3>
    </div>
    <div class="bloco-loja">
        <h1>Carro de Apoio <br> e de Bagagem</h1>
    </div>
    <div class="bloco-loja">
        <h1>Kit Evento</h1>
        <h2 style="margin-top:10px;">Camisa Ciclista + Medalha de <br> Conclusão da Expedição + <br> Adesivo do Evento</h2>
    </div>
    <div class="bloco-loja">
        <h1>Seguro</h1>
    </div>
</div>
<div id="bottaaoPA">Comprar</div>

javascript jquery classes

asked by anonymous 25.01.2016 / 17:27

3 answers

5

You can use the toggleClass() method of jQuery:

$(".pacotes").click(function() {
  $(this).toggleClass("select");
});

25.01.2016 / 17:35

2

Try changing to:

<div id="bottaaoPA" onclick="if(this.hasClassName('select')){ this.className = ''}else{ this.className = 'select' };">ComprarPA</div>

With pure JS.

25.01.2016 / 19:19

How to separate a number in two Change readonly for several fields

score 3 · Accepted Answer

It would look like this (over class , you do not see it changing in code HTML , but it adds):

$(function(){
  var contador = 0;

  $('.pacotes').click(function(){

    if(contador === 0)
    {
      $(this).addClass("select");
      $("#bottaaoPA").css("display","block");
      $("#bottaaoPB").css("display","none");
      $("#bottaaoPC").css("display","none");
      contador = 1;
    }
    else
    {
      $(this).removeClass("select");
      $("#bottaaoPB").css("display","block"); //apenas para teste
      contador = 0;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="pacotes pa">
	<h1> PACOTE COMPLETO</h1>
	<h2 style="display:inline-block;margin-right:5px;">R$<b>2.500,</b></h2><h6 style="display:inline-block;">00</h6>
	
	<div class="bloco-loja">
	   <h1>Transfer</h1> 
	   <h2>(participante + bike)</h2> 
	   <h3>Vitória x Itaúnas<br> Praia das Neves x Vitória</h3>
	</div>
	
	<div class="bloco-loja">
	   <h1 style="margin-bottom:5px;">Pousada/Hotel</h1> 
	   <h3>09 diárias c/ café da manhã</h3>
	</div>
	
	<div class="bloco-loja">
	   <h1>Carro de Apoio <br> e de Bagagem</h1> 
	</div>
	
	<div class="bloco-loja">
	   <h1>Kit Evento</h1> 
	   <h2 style="margin-top:10px;">Camisa Ciclista + Medalha de <br> Conclusão da Expedição + <br> Adesivo do Evento</h2> 
	</div>
	
	<div class="bloco-loja">
	   <h1>Seguro</h1> 
	</div>
</div>

<div id="bottaaoPA">ComprarPA</div>
<div id="bottaaoPB">ComprarPB</div>
<div id="bottaaoPC">ComprarPC</div>

Clicking for the first time will hide the PB and PC divs and assign a class select to div.pacotes , clicking it again removes that class and displays the PB div (only for see working here).