JSFiddle - React, Tailwind, and code Playground

by Harisankaran Parameswaran

HTML

<div id="mainContent1">
    <form action="#">
        <p>
            <select id="dropdown" name="dropdown">
                <option value="Option" selected="selected">Click the drop down to select a weblink</option>
                <option value="Accountants">Accountants</option>
                <option value="Acupuncture">Acupuncture</option>
                <option value="Advertising">Advertising</option>
            </select>
        </p>
    </form>
    <!-- Weblinks start here -->
    <div id="Option"></div>
    <div id="Accountants" class="hidden">
        <ul>
            <li><a href="http://www.balmeraccountancy.co.uk/" target="_blank">Balmer Accountancy</a>
            </li>
            <li><a href="http://www.birchcooper.com/" target="_blank">BirchCooper</a>
            </li>
            <li><a href="http://www.tearlecarver.co.uk/" target="_blank">Tearle &amp; Carver</a>
            </li>
        </ul>
    </div>
    <div id="Acupuncture"  class="hidden">
        <ul>
            <li><a href="http://www.joannesewell.co.uk/" target="_blank">Dr Joanne Sewell</a>
            </li>
        </ul>
    </div>
    <div id="Advertising" class="hidden">
        <ul>
            <li><a href="http://www.thebestof.co.uk/buckingham" target="_blank">Best of Buckingham</a>
            </li>
            <li><a href="http://www.essentiallylocal.co.uk/" target="_blank">Essentially Local</a>
            </li>
            <li><a href="http://www.hogstyend.co.uk/" target="_blank">Hogsty End</a>
            </li>
            <li><a href="http://www.roundabouthere.co.uk/" target="_blank">Roundabout Here</a>
            </li>
        </ul>
    </div>

CSS

.hidden {display: none;}

JavaScript

$(document).ready(function () {
    var select = $('#dropdown');

    function showTab(name) {
        name = '#' + name;
        $('#mainContent1 > div').not(name).hide();
        $(name).show();
    }

    select.change(function () {
        showTab($(this).val());
    });

    showTab(select.val());
});