On click display and update data-attribute in another div

Issue

I have a quiz and on clicking an answer (button/link). I'd like the give feedback as to as to whether the answer was correct or incorrect.

I thought using data- might be the best way to do this but I suppose I could have several paragraphs hidden and just show the one linked to the button when clicked.

What are peoples thoughts on that? Is the length of text a problem with data- as I've never used it in this way/with this volume of copy?

It would be nice if when the content was added/changed the container transitioned in vertical height and the updated text faded in. So the approach might be dictated by that.

Be good to get peoples feedback on the best approach for this.

.btn {display: inline-block; margin-bottom: 24px;}
.feedback { background: #f7f7f7; padding: 24px; }

<a href="#" class="btn" data-value="false" data-feedback="That's incorrect lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua">Option 1</a>
<a href="#" class="btn" data-value="true" data-feedback="That's correct! Ut enim ad minim veniam, quis nostrud exercitation ullamco.">Option 2</a>
<a href="#" class="btn" data-value="false" data-feedback="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur">Option 3</a>

<div class="feedback">
  <p>[ FEEDBACK APPEARS HERE ]</p>
</div>

Solution

const feedbackButtons = document.querySelectorAll('.quiz [data-feedback]');

for (let i = 0; i < feedbackButtons.length; i++) {
  feedbackButtons[i].onclick = function() {
    const feedbackElement = this.parentNode.querySelector('.feedback');
    
    feedbackElement.querySelector('p').innerHTML = this.dataset.feedback;
    
    if (this.dataset.value === 'true') {
      feedbackElement.classList.remove('incorrect');
      feedbackElement.classList.add('correct');
    } else if (this.dataset.value === 'false') {
      feedbackElement.classList.remove('correct');
      feedbackElement.classList.add('incorrect');
    }
    
    feedbackElement.style.transition = 'none';
    feedbackElement.classList.remove('active');
    setTimeout(() => {
      feedbackElement.removeAttribute('style');
      feedbackElement.classList.add('active');
    });
  };
}

.feedback {
  height: 0;
  transition: height 1s;
  overflow: hidden;
}

.feedback.active {
  padding: 20px;
  height: 60px;
}

.feedback.correct {
  background-color: #00FF00;
}

.feedback.incorrect {
  background-color: #FF0000;
}

<div class="quiz">
  <a href="#" class="btn" data-value="false" data-feedback="That's incorrect lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua">Option 1</a>
  <a href="#" class="btn" data-value="true" data-feedback="That's correct! Ut enim ad minim veniam, quis nostrud exercitation ullamco.">Option 2</a>
  <a href="#" class="btn" data-value="false" data-feedback="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur">Option 3</a>

  <div class="feedback">
    <p>[ FEEDBACK APPEARS HERE ]</p>
  </div>
</div>

Answered By - Kostas