JSFiddle - React, Tailwind, and code Playground

by chrisfrisina

HTML

<section id="gc_section_oldresumes" class="gc section oldresumes hidden"><h1>Old Resumes</h1>
                        <select class="oldDocs">
                            <option value="d0" selected>Please select one:</option>
                            <option value="d1">PM.docx</option>
                            <option value="d2">PM.pdf</option>
                            <option value="d3">Java.docx</option>
                            <option value="d4">Java.pdf</option>
                        </select>
                        <div class="scroll-content">
                            <div class="dockList d0" id="d0">
                            </div>
                            <div class="dockList d1" id="d1">
                                <iframe src="http://docs.google.com/viewer?url=http%3A%2F%2Fspecialorange.org%2Fresume%2F_img%2Fpm.docx&embedded=true" width="75%" height="1170" style="border: none;"></iframe>
                            </div>
                            <div class="dockList d2" id="d2">
                                <iframe src="http://docs.google.com/viewer?url=http%3A%2F%2Fspecialorange.org%2Fresume%2F_img%2Fpm.pdf&embedded=true" width="75%" height="1170" style="border: none;"></iframe>
                            </div>
                            <div class="dockList d3" id="d3">
                                <iframe src="http://docs.google.com/viewer?url=http%3A%2F%2Fspecialorange.org%2Fresume%2F_img%2Fjava.docx&embedded=true" width="600" height="780" style="border: none;"></iframe>
                            </div>
                            <div class="dockList d4" id="d4">
                                <iframe src="http://docs.google.com/viewer?url=http%3A%2F%2Fspecialorange.org%2Fresume%2F_img%2Fjava.pdf&embedded=true" width="600" height="780" style="border: none;"></iframe>
                            </div>
                        </div>
                    </section>

CSS

.dockList {
     display: none;   
}

JavaScript

$('#gc_section_oldresumes').change(function(){
        $('.dockList').hide();
    console.log($(this).val());
        $('#' + $(this).val()).show();
    });