I developed a small quiz, where clicking on an answer moves the checkmark to the clicked div.
const answers = document.getElementsByClassName('answer');
[].forEach.call(answers, function(answer) {
$(answer).click(function() {
if (!answer.querySelector('.check')) {
[].forEach.call(answers, function(answerToDelete) {
if (answerToDelete.querySelector('.check')) {
answerToDelete.querySelector('.check').remove()
}
})
$(answer).last().append('<div class="check"><object data="check.svg" width="20" > </object></div>')
}
})
}).container {
padding: 5%;
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
.question_title {
font-size: 18px;
font-weight: 500;
text-align: center;
}
.container_answers {
display: grid;
justify-items: center;
gap: 10px;
}
.answer {
display: flex;
align-items: center;
border: 1px solid black;
padding: 0 10px;
max-width: 15%;
min-width: 170px;
border-radius: 10px;
cursor: pointer;
overflow: hidden;
}
.dot_answer {
background-color: black;
color: white;
margin-right: 7px;
padding: 5px 10px;
border-radius: 5px;
}
.text_answer {
font-weight: 700;
}
.check {
margin-left: 20%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="container">
<div class="question_title">
<p>I am a Question, what is your answer?</p>
</div>
<div class="container_answers">
<div class="answer">
<span class="dot_answer">A</span>
<p class="text_answer">Answer 1</p>
</div>
<div class="answer">
<span class="dot_answer">B</span>
<p class="text_answer">Answer 2</p>
</div>
<div class="answer">
<span class="dot_answer">C</span>
<p class="text_answer">Answer 3</p>
</div>
<div class="answer">
<span class="dot_answer">D</span>
<p class="text_answer">Answer 4</p>
</div>
</div>
</div>However, when I click on the div, it expands and shrinks back instantly. I tried using overflow:hidden, but it didn't work. The transition between the checkmarks should be smooth.