JSFiddle - React, Tailwind, and code Playground

by raphaelwilker

HTML

<div class="t1">
clique
</div>
<div class="t2">
clique
</div>
<div class="t4">
<p>
test 4
</p>
</div>
<div class="t5">
<p>
test 5
</p>
</div>

<div class="oi">
<p class="ask">
Oh ! E agora quem poderam em defender ?
</p>
<p class="chapolin">
Eu !
</p>
<p class="hero">
O Chapolin Colorado !
</p>
</div>

CSS

.t1{
  background-color: greenyellow;
}
.t2{
  background-color: blueviolet;
}
.t1,.t2{
  cursor: pointer;
}

.t4{
  background-color: orange;
}

.t5{
  background-color: blue;
}

.t4.test,.t5.test{
  background-color: red;
}
.t4.myClass4{
  background-color: #ccc;
}
.t5.myClass5{
  background-color: #888;
}
.ask,.chapolin,.hero{
  cursor: pointer;
  background-color: red;
}
.chapolin,.hero{
  display: none;
}

.chapolin.show,.hero.show{
  display: block;
}

.chapolin{
  color: yellow;
}

JavaScript

//Ação no primeiro só adiciona a classe
$('.t1').click(function(){
	$('.t4,.t5').addClass('test');
  $('.t4').addClass('myClass4');
  $('.t5').addClass('myClass5');
});
//Na segunda div usamos o toggleClass para adicionar ou remover a classe
$('.t2').click(function(){
	$('.t4,.t5').toggleClass('test');
  $('.t4').removeClass('myClass4');
  $('.t5').removeClass('myClass5');
});
$('.ask').click(function(){
	$('.chapolin,.hero').toggleClass('show')
})