JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<select id="target">
<option value="">Choose your country</option>
<option value="content_1">BELGIEN (De Tijd)</option>
<option value="content_2">BULGARIEN (Capital)</option>
<option value="content_3">DÄNEMARK (Information)</option>
<option value="content_4">DEUTSCHLAND (Frontal 21, Handelsblatt)</option>
<option value="content_5">ESTLAND (Äripäev)</option>
<option value="content_6">FINNLAND (YLE/MOT)</option>
<option value="content_7">FRANKREICH (Liberation)</option>
<option value="content_8">GRIECHENLAND (Kathimerini)</option>
<option value="content_9">IRLAND (Irish Times)</option>
<option value="content_10">ITALIEN (IlSole24Ore)</option>
<option value="content_11">KROATIEN (Ostro)</option>
<option value="content_12">LETTLAND (Delfi)</option>
<option value="content_13">LITAUEN (Verslo žinios)</option>
<option value="content_14">LUXEMBURG (Reporter.lu)</option>
<option value="content_15">MALTA (The Shift)</option>
<option value="content_16">NIEDERLANDE (Follow the Money)</option>
<option value="content_17">NORWEGEN (Aftenposten)</option>
<option value="content_18">ÖSTERREICH (Addendum)</option>
<option value="content_19">POLEN (TVN)</option>
<option value="content_20">PORTUGAL (Expresso.pt)</option>
<option value="content_21">RUMÄNIEN (Libertatea)</option>
<option value="content_22">SCHWEDEN (Sverige Radio)</option>
<option value="content_23">SCHWEIZ (Republik)</option>
<option value="content_24">SLOWAKEI (Aktuality.sk)</option>
<option value="content_25">SLOWENIEN (Ostro)</option>
<option value="content_26">SPANIEN (El Confidencial)</option>
<option value="content_27">TSCHECHIEN (RESPEKT)</option>
<option value="content_28">UK (TBIJ)</option>
<option value="content_29">UNGARN (Direkt36)</option>
<option value="content_30">ZYPERN (Politis)</option>
            
            </select>

        <div id="content_1" class="inv">
        <a href="#">
          <h3 class="test">Handelsblatt</h3>
          <h2>Headline</h2>
          <p>Lorem ipsum dolor sit amet,...

CSS

.inv {
    display: none;
}

.vis {
    margin-top:30px;
    padding:30px;
    font-size:24px;
    line-height:30px;
    font-weight:700;
    text-align:center;
    background:white;
}

#target {
 display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
   height: 50px;
  background: white;
  color: black;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  font-weight:700;
text-align-last:center;
}

.vis a {
  text-decoration: none;
  
}

.vis a h3 {
  color: rgb(0,0,0);
  color: rgba(0,0,0,.5);
  font-size: 70%;
  margin: 30px auto 10px auto;
}

.vis a h2 {
  margin-bottom: 20px;
}

.vis a p {
  color: rgb(0,0,0);
  color: rgba(0,0,0,.98);
  font-size: 17px;
  line-height: 22px;
  text-align: justify;
  font-weight: 500;
}

JavaScript

document
                .getElementById('target')
                .addEventListener('change', function () {
                    'use strict';
                    var vis = document.querySelector('.vis'),   
                        target = document.getElementById(this.value);
                    if (vis !== null) {
                        vis.className = 'inv';
                    }
                    if (target !== null ) {
                        target.className = 'vis';
                    }
            });