JSFiddle - React, Tailwind, and code Playground

by thcipriani

HTML

<script src="http://www.customchannels.net/includes/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="http://www.customchannels.net/includes/colorbox.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<!--script template for appending to the DOM-->
<script type="text/template" id="channel">
    <div class="boxy">
      <h1><%= text %></h1>
      <p>You Won!</p>
     </div>
</script>


<!--this div is hidden via css-->
<div class="accordianThing">
    <h1>This Stuff</h1>
    <ul>
        <li>A) Is Awesome</li>
        <li>B) Rocks your face&hellip;Hard&hellip;</li>
        <li>C) Click <a href="#" id="dingy">get a prize</a></li>
    </ul>
</div>
 <!--begin rendered content-->
<a href="#" id="thing1">Thing</a>
<div id="fillMe"></div>

CSS

h1 { font-weight: bold; font-size: 2em; line-height: 1.5em; }
.boxy { padding: 15px; background: yellow; }

.accordianThing {
    display: none;
}

#colorbox .accordianThing {
    display: block;
}

JavaScript

(function($) {
    $('#thing1').colorbox({
        inline: true,
        href: '.accordianThing',
        width: 300,
        height: 300
    });
    
    $('#dingy').on('click', function(e) {
        e.preventDefault();
        showOtherJunk($(this).text());
    });

    function showOtherJunk(texty) {
        var channel = _.template($('#channel').html()),
            content = { 'text': texty };
        $('#fillMe').append(channel(content));
        $.colorbox.close();
    }
})(jQuery);