JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<div id='menu'>
<p><a href="#" onclick='show_article(1);'>Silas Baxter-Neal</a></p>
<p><a href="#" onclick='show_article(2);'>Brian Kachinsky</a></p>
<p><a href="#" onclick='show_article(3);'>Patrick Melcher</a></p>
</div>
<div id='content'>
    <div class='article show' id='article1'>
<!-- Silas Baxter-Neal -->
<p><strong>Silas Baxter-Neal</strong><br />
Excerpt on Physical Theraphy -- One thing that I found unique about these two doctors was that they were very interested in the movements I did when I skated. They had me skate around the parking lot so they could see how my body moved and what muscle groups they needed to work on. After about a year of physical therapy and finally taking two months off the board, my ankles made a serious recovery and they function close to how they used to.</p>
<iframe width="360" height="274" src="http://www.youtube.com/embed/IMdQ-aeo_hA?rel=0" frameborder="0" allowfullscreen></iframe>    
    </div>
    <div class='article' id='article2'>
<!-- Brian Kachinsky -->
<p><strong>Brian Kachinsky</strong><br />
Excerpt on Injuries and Healing - I feel like I've had it all at some point. Broken bones, fake teeth, surgeries, degenerative discs, rotator cuff issues, tons of stitches and have been to emergency rooms in more than eight countries including Germany, Mexico, Netherlands, Thailand, China, Estonia, and Brazil. I've worked with countless physical therapists both standard and holistic. I have also gained a good knowledge of the human body and how it works and heals in the process.</p>
<iframe width="360" height="274" src="http://www.youtube.com/embed/ARTavjAT5Pc?rel=0" frameborder="0" allowfullscreen></iframe>    
    </div>
    <div class='article' id='article3'>
<!-- Patrick Melcher -->
<p><strong>Patrick Melcher</strong><br />
Excerpt from Recalling a Time in his Career - A second turning point came when I made the move from the Midwest out to California. Meeting my skate heroes and hooking up with all the industry heads was...

CSS

#menu, #content {
    float: left;
}
#menu {
    width: 20%;
}
#content {
    width: 80%;
}
.article {
    display: none;
}
.show {
    display: block;
}

JavaScript

function show_article(index) {
    var articles = document.querySelectorAll('div.article');
    var i=0;
    for (i=0; i<articles.length; i++) {
        if (i == (index-1)) {
            articles[i].style.display = 'block';
        }
        else {
            articles[i].style.display = 'none';
        }
    }
}