mark.js trigger event from selection

Question

I can't seem to figure out how to use mark.js (or some other tools) that would allow me to trigger the animated highlighting when a button is selected in a table of contents.

e.g. Imagine on the left side of the page is a list of questions. When the user selects one of these questions/clicks on a question, the corresponding answer gets highlighted on the right side, somehow. It could be that the right side of the page goes dark except for the corresponding text or a red frame animates around the corresponding text, or is highlighted...any ideas?

In other words, the highlighting is triggered based off of a click or tap, and not a search result.

Answer 1

You don't need mark.js as it's much more easier:

$(function() {
  $("[data-question]").on("click", function() {
    var number = $(this).attr("data-question");
    $("[data-answer]").removeClass("highlight");
    $("[data-answer='" + number + "']").addClass("highlight");
  });
});

.questions,
.answers {
  float: left;
  width: 50%;
}

.highlight {
  background: red;
}

<div class="questions">
  <ul>
    <li data-question="1">Question 1</li>
    <li data-question="2">Question 2</li>
    <li data-question="3">Question 3</li>
  </ul>
</div>
<div class="answers">
  <ul>
    <li data-answer="1">Answer 1</li>
    <li data-answer="2">Answer 2</li>
    <li data-answer="3">Answer 3</li>
  </ul>
</div>