JSFiddle - React, Tailwind, and code Playground

by clayshannon

HTML

<div id="tabs" class="content-wrapper">
    <ul>
        <li><a href="#tab-Books">Books</a>

        </li>
        <li><a href="#tab-Movies">Movies</a>

        </li>
        <li><a href="#tab-Music">Music</a>

        </li>
    </ul>
    <div id="tab-Books">
        <select id="bookDropDown">
            <option value="Pulitzer">Pulitzer</option>
            <option value="NBCC">National Book Critics Circle</option>
            <option value="NBA">National Book Awards</option>
            <option value="NOBA">National Outdoors Book Awards</option>
        </select>
        <div id="BooksContent" class="clearfix">Content in Books tab</div>
    </div>
    <div id="tab-Movies">
        <select id="moviesDropDown">
            <option value="Oscars">Academy Awards/Oscars</option>
            <option value="GoldenGlobe">Golden Globe</option>
            <option value="Cannes">Cannes Film Festival</option>
            <option value="Sundance">Sundance</option>
        </select>
        <div id="MoviesContent" class="clearfix">Content in Movies tab</div>
    </div>
    <div id="tab-Music">
        <select id="musicDropDown">
            <option value="Grammies">Grammies</option>
            <option value="AMA">American Music Awards</option>
            <option value="CMA">Country Music Awards</option>
            <option value="Indies">Indies</option>
        </select>
        <div id="MusicContent" class="clearfix">Content in Music tab</div>
    </div>
</div>

JavaScript

$('#tabs').tabs({
    beforeActivate: function (event, ui) {
        if (ui.newTab.index() == 0) {
            booksContent = $('#BooksContent').html();
            if (booksContent == 'Content in Books tab') {
                alert('load pulitzers');
                $('#BooksContent').html('consider pulitzers loaded');
            }
        }
        else if (ui.newTab.index() == 1) {
            moviesContent = $('#MoviesContent').html();
            if (moviesContent == 'Content in Movies tab') {
                alert('load oscars');
                $('#MoviesContent').html('consider oscars loaded');
            }
        }
        else if (ui.newTab.index() == 2) {
            musicContent = $('#MusicContent').html();
            if (musicContent == 'Content in Music tab') {
                alert('load grammies');
                $('#MusicContent').html('consider grammies loaded');
            }
        }
    }
});