JSFiddle - React, Tailwind, and code Playground

by Tyler Eich

HTML

<link rel="stylesheet" href="http://cdn.dcodes.net/2/tabs/css/dc_tabs.css">
<script src="http://cdn.dcodes.net/2/jquery.min.js"></script>
<script src="http://cdn.dcodes.net/2/tabs/js/dc_tabs.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;amp;key=AIzaSyBTQA-nyBgf0w2FWIUV19M2cWwwrxzUK3A"></script>
<!-- DC Opera Tabs Start -->
<div class="dc_tabs_type_4_container" style="width:90%; height:auto;">
    <ul id="dc_tabs_type_4">
        <!-- Tab Captions -->
        <li><a href="#" title="red-tab1">One</a>

        </li>
        <li><a href="#" title="red-tab2">Two</a>

        </li>
        <li><a href="#" title="red-tab3">Three</a>

        </li>
        <li><a href="#" title="red-tab4">Four</a>

        </li>
    </ul>
    <div id="dc_tabs_type_4_content" style="position: absolute;">
        <!-- Tab Content Container -->
        <!-- Tab 1 Start -->
        <div id="red-tab1">
            <div id="4552130" style="width:500px; height:300px; float:left"></div>
        </div>
        <!-- Tab 1 End -->
        <!-- Tab 2 Start -->
        <div id="red-tab2">
             <h2>Tab Two</h2>

            <p>Aenean dui nulla, egestas sit amet auctor vitae, facilisis id odio. Donec dictum gravida feugiat.</p>
            <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras pretium elit et erat condimentum et volutpat lorem vehicula</p>
            <p>Morbi tincidunt pharetra orci commodo molestie. Praesent ut leo nec dolor tempor eleifend.</p>
        </div>
        <!-- Tab 2 End -->
        <!-- Tab 3 Start -->
        <div id="red-tab3">
             <h2>Tab Three</h2>

            <p>Non erat laoreet ullamcorper. Pellentesque magna metus, feugiat eu elementum sit amet, cursus sed diam. Curabitur posuere porttitor lorem, eu malesuada tortor faucibus sed.</p>
             <h3>Duis pulvinar nibh vel urna</h3>

            <p>Donec purus leo, porttitor eu molestie quis, porttitor...

JavaScript

function display_kmlmap(kmlmapid, kmlurllink) {
    var kmlmap = kmlmapid;
    var kmlUrl = 'http://www.pineywoodsrealestate.com/test/' + kmlurllink;

    var map_options = {};
    var map = new google.maps.Map(document.getElementById(kmlmap), map_options);

    var kmlOptions = {
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        map: map
    };


    var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
}



/* This is actually right after <div id="red-tab1"> */
$(document).ready(function () {
    if ($('#4552130').length != 0) {

        display_kmlmap("4552130", "PW-Files\/2\/kml\/4552130.kml");

    }
});



/* Tabs 4 */
$(document).ready(function () {
    $("#dc_tabs_type_4_content > div").hide(); // Initially hide all dc_tabs_type_4_content
    $("#dc_tabs_type_4 li:first").attr("id", "current"); // Activate first tab
    $("#dc_tabs_type_4_content div:first").fadeIn(); // Show first tab dc_tabs_type_4_content

    $('#dc_tabs_type_4 a').click(function (e) {
        e.preventDefault();
        $("#dc_tabs_type_4_content > div").hide(); //Hide all dc_tabs_type_4_content
        $("#dc_tabs_type_4 li").attr("id", ""); //Reset id's
        $(this).parent().attr("id", "current"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show dc_tabs_type_4_content for current tab
    });
})();