Decision Tree

by Michel Penke

HTML

<h2>Mehr Infos von CORRECTIV? Yo Yo</h2>

<button id="btn_1">Yes</button>
<button id="btn_2">No</button>

<div id="yes">

<h3>Lesen oder sehen?</h3>
<button id="btn_6">Lesen</button>
<button id="btn_7">Sehen</button>

<div id="sehen">
Instagram Youtube
</div>

<div id="lesen">

<h3>Wie häufig?</h3>
<button id="btn_3">Mehrmals täglich</button>
<button id="btn_4">Einmal wöchentlich</button>
<button id="btn_5">Nur Highlights</button>
</div>
</div>

<div id="no">
:-(
</div>

<div id="daily">
Twitter Facebook
</div>

<div id="weekly">
Spotlight
</div>

<div id="highlights">
correctiv.org/top-stories
</div>

CSS

#yes, #no, #daily, #weekly {
  display: none;
}


#daily {
  display: none;
}

#weekly {
  display: none;
}

#highlights {
  display: none;
}

#lesen {
  display: none;
}

#sehen {
  display: none;
}

#no.show {
  display: block;
}

#yes.show {
  display: block;
}

#daily.show {
  display: block;
}

#weekly.show {
  display: block;
}

#highlights.show {
  display: block;
}

#lesen.show {
  display: block;
}

#sehen.show {
  display: block;
}

JavaScript

document.getElementById('btn_1').addEventListener('click',
function () {

   document.getElementById('yes')
       .classList
       .toggle('show');
});
document.getElementById('btn_2').addEventListener('click',
function () {

   document.getElementById('no')
       .classList
       .toggle('show');
});
document.getElementById('btn_3').addEventListener('click',
function () {

   document.getElementById('daily')
       .classList
       .toggle('show');
});
document.getElementById('btn_4').addEventListener('click',
function () {

   document.getElementById('weekly')
       .classList
       .toggle('show');
});
document.getElementById('btn_5').addEventListener('click',
function () {

   document.getElementById('highlights')
       .classList
       .toggle('show');
});
document.getElementById('btn_6').addEventListener('click',
function () {

   document.getElementById('lesen')
       .classList
       .toggle('show');
});
document.getElementById('btn_7').addEventListener('click',
function () {

   document.getElementById('sehen')
       .classList
       .toggle('show');
});