JSFiddle - React, Tailwind, and code Playground

by iammaddison143

HTML

<div class="content">
  <div class="content--item">
    <a href="#" class="question">Вопрос #1</a>
    <a href="#" class="answer">Ответ #1</a>
  </div>
  
  <div class="content--item">
    <a href="#" class="question">Вопрос #2</a>
    <a href="#" class="answer">Ответ #2</a>
  </div>
</div>

SASS

.content
    padding: 50px
    background-color: green

.content--item + .content--item
    margin: 20px 0 0 0

.question
    background-color: yellow

.answer
    margin: 5px 0 0 0
    background-color: blue

JavaScript

$( '.question' ).on( 'click', function() {
	$( this )
  	.parents( '.content--item' )
    .find( '.answer' )
    .css( { 'color': 'white', 'background-color': 'black' } )
})

$( '.answer' ).on( 'click', function() {
	$( this )
  	.parents( '.content--item' )
    .find( '.question' )
    .css( { 'color': 'white', 'background-color': 'blue' } )
})