I’m sure this JS piece of JavaScript code can be simplified… I’m trying to reduce the amount of code lines and believe this can be condensed and merged into a shorter version? It’s basically a decision tree with yes | no choices and results appear according to user yes | no selection.
Much appreciated, many thanks in advance.
<script>
document.getElementById('yesButton').addEventListener('click', function() {
document.getElementById('noPanel').classList.add('hidden');
document.getElementById('yesPanel').classList.remove('hidden');
document.getElementById('keepPanel').classList.add('hidden');
document.getElementById('sellPanel').classList.add('hidden');
document.getElementById('gainNoPanel').classList.add('hidden');
document.getElementById('gainYesPanel').classList.add('hidden');
document.getElementById('cgtNoPanel').classList.add('hidden');
document.getElementById('cgtYesPanel').classList.add('hidden');
});
document.getElementById('noButton').addEventListener('click', function() {
document.getElementById('yesPanel').classList.add('hidden');
document.getElementById('noPanel').classList.remove('hidden');
document.getElementById('keepPanel').classList.add('hidden');
document.getElementById('sellPanel').classList.add('hidden');
document.getElementById('gainNoPanel').classList.add('hidden');
document.getElementById('gainYesPanel').classList.add('hidden');
document.getElementById('cgtNoPanel').classList.add('hidden');
document.getElementById('cgtYesPanel').classList.add('hidden');
});
document.getElementById('keepButton').addEventListener('click', function() {
document.getElementById('keepPanel').classList.remove('hidden');
document.getElementById('sellPanel').classList.add('hidden');
document.getElementById('gainNoPanel').classList.add('hidden');
document.getElementById('gainYesPanel').classList.add('hidden');
document.getElementById('cgtNoPanel').classList.add('hidden');
document.getElementById('cgtYesPanel').classList.add('hidden');
});
document.getElementById('sellButton').addEventListener('click', function() {
document.getElementById('sellPanel').classList.remove('hidden');
document.getElementById('keepPanel').classList.add('hidden');
document.getElementById('gainNoPanel').classList.add('hidden');
document.getElementById('gainYesPanel').classList.add('hidden');
document.getElementById('cgtNoPanel').classList.add('hidden');
document.getElementById('cgtYesPanel').classList.add('hidden');
});
document.getElementById('gainNoButton').addEventListener('click', function() {
document.getElementById('gainNoPanel').classList.remove('hidden');
document.getElementById('gainYesPanel').classList.add('hidden');
document.getElementById('cgtNoPanel').classList.add('hidden');
document.getElementById('cgtYesPanel').classList.add('hidden');
});
document.getElementById('gainYesButton').addEventListener('click', function() {
document.getElementById('gainYesPanel').classList.remove('hidden');
document.getElementById('gainNoPanel').classList.add('hidden');
document.getElementById('cgtNoPanel').classList.add('hidden');
document.getElementById('cgtYesPanel').classList.add('hidden');
});
document.getElementById('cgtNoButton').addEventListener('click', function() {
document.getElementById('cgtNoPanel').classList.remove('hidden');
document.getElementById('cgtYesPanel').classList.add('hidden');
});
document.getElementById('cgtYesButton').addEventListener('click', function() {
document.getElementById('cgtYesPanel').classList.remove('hidden');
document.getElementById('cgtNoPanel').classList.add('hidden');
});
</script>