JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<script src="http://www.zurb.com/javascripts/plugins/jquery.reveal.js"></script>
<a href="#" class="faq">FAQ!</a>

<div id="myModal" class="reveal-modal medium">
    <h1>Device and App Tracking FAQ</h1>
    <div id="form"></div>
    <div id="accordion">
        <h3>What is this?</h3>
        <div>
            <p>Certain challenges can now be tracked with popular activity-tracking devices like <b>Nike+</b>, <b>RunKeeper</b> and <b>Fitlinxx</b>. Connect your device or app, get tracking and we’ll take care of the rest! Once you’ve tracked an activity, your data will be tracked into each device-enabled challenge based on the type of activity being tracked.
            </p>
        </div>
        <h3>Where can I find device-enabled challenges?</h3>
        <div>
            <p>The device icon you see below denotes that a challenge is device-enabled. When
browsing on the Find Challenge page, any device-enabled challenge will show a device icon. If you can't find one, your organization may not yet be offering a device-friendly challenge.            
            </p>
        </div>
        <h3>How do I know if my activity is being tracked?</h3>
        <div>
            <p>When you’ve completed tracking an activity, we fetch your newly tracked data and auto-populate it into each challenge – respectul of the activity type – and display how long ago and which device that was used.
            </p>
         </div>
    </div>
    <a class="close-reveal-modal">&#215;</a>
</div>

CSS

a {
    font-size: 20px;
}

#accordion h3 {
    color: #6396FF;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 10px;
}

#accordion h3:hover {
    background: #EEEEEE;
}

#accordion h3.active {
    color: #444444;
    background-color: #EDEDED;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#EDEDED), to(#E5E5E5));
    background-image: -moz-linear-gradient(top, #EDEDED, #E5E5E5); 
    background-image: -ms-linear-gradient(top, #EDEDED, #E5E5E5); 
    background-image: -o-linear-gradient(top, #EDEDED, #E5E5E5); 
    background-image: linear-gradient(top, #EDEDED, #E5E5E5);
}

#accordion h3 + div p {
    color: #444444;
    font-size: 12px;
    line-height: 18px;
    padding: 10px 0;
    margin: 0;
}


#myModal {    
    font-family: 'Helvetica-Neue', 'HelveticaNeue', 'Helvetica', Arial, sans-serif;
}

#myModal h1 {
    font-size: 20px;
    font-weight: bold !important;
    margin-bottom: 20px;
}

#myModal p {
    line-height: 18px;
    margin: 0 0 10px;
}

#myModal h1 + p {
    color: #777777;
    font-size: 15px;
    line-height: 24px;
}

.reveal-modal-bg {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
.reveal-modal {
    background: #FFFFFF;
    border: 1px solid #999;
    border-top-color: #BBB;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    left: 50%;
    margin-left: -300px;
    padding: 30px 40px 34px;
    position: absolute;
    top: 150px;
    visibility: hidden;
    width: 520px;
    z-index: 101;
}
.reveal-modal.small {
    margin-left: -140px;
    width: 200px;
}
.reveal-modal.medium {
    margin-left: -240px;
    width: 400px;
}
.reveal-modal.large {
    margin-left: -340px;
    width: 600px;
}
.reveal-modal.xlarge {
    margin-left: -440px;
    width: 800px;
}
.reveal-modal .close-reveal-modal {
    color: #AAAAAA;
   ...

JavaScript

(function($) {
    $.fn.lui_accordion = function(options) {

        var defaults = {};

        var options = $.extend({}, defaults, options);

        return this.each(function() {

            var $headers = $(this).find('h3');

            $headers.click(function() {
                var $this = $(this),
                    $content = $this.next('div');

                if ($this.hasClass('active')) {

                    $this.removeClass('active');

                    $content.animate({
                        height: 'hide',
                        opacity: .5,
                        easing: 'easeInOutQuad'
                    }, 200);

                } else {

                    $this.addClass('active');

                    $content.animate({
                        height: 'show',
                        opacity: 1,
                        easing: 'easeInOutQuad'
                    }, 200);
                }
            });

            // hide all content
            $headers.next('div').hide().css('opacity', .5);
        });
    };

    jQuery.expr[':'].Contains = function(a, i, m) {
        return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

})(jQuery);


$(document).ready(function() {

    function filterList(header, list) {
        var form = $("<form>").attr({
            "class": "filterform",
            "action": "#"
        }),
            input = $("<input>").attr({
                "class": "filterinput",
                "type": "text"
            });
        
        $(form).append(input).insertAfter('#myModal h1');

        $(input).change(function() {
            var filter = $(this).val();
            if (filter) {

                $matches = $(list).find('h3:Contains(' + filter + ')');
                $('h3', list).not($matches).slideUp();
                $matches.slideDown();

            } else {
                $(list).find('h3').slideDown();
            }
            return false;
 ...