JSFiddle - React, Tailwind, and code Playground

by hakarune

HTML

<div class="collapsibleDirectory" data-role="collapsible">
                <H3>Child Development Program</H3>
                <div id='child-development-program'></div>
            </div>

CSS

@font-face {
    font-family: 'StoneSans';
    src: url('StoneSansSCITCTTMedium.ttf');
}

.highlight {
    color: green;
}

.header {
    text-align: center;
    min-height: 40px;
    font-size: 30px;
    font-family: "StoneSans";
}

.header .ui-btn-text {
    color: white;
}

body {
    background: linear-gradient(#870511, #54030B) !important;
    background: -moz-linear-gradient(#870511, #54030B) !important;
    background: -webkit-linear-gradient(#870511, #54030B) !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#7C0510), to(#7C0510)) !important;
    background: -o-linear-gradient(#870511, #54030B) !important;
    text-shadow: none;
}

/******************/
/* Coloring the app */
/******************/

.ui-bar-x {
    background: linear-gradient(#5E6A71, #393F3E);
    background: -moz-linear-gradient(#5E6A71, #393F3E);
    background: -webkit-linear-gradient(#5E6A71, #393F3E);
    background: -webkit-gradient(linear, left top, left bottom, from(#5E6A71), to(#393F3E));
    background: -o-linear-gradient(#5E6A71, #393F3E);
    color: #fff;
}

.ui-bar-y {
    background: #333;
    color: white;
}

.ui-page {
    background: linear-gradient(#870511, #54030B);
    background: -moz-linear-gradient(#870511, #54030B);
    background: -webkit-linear-gradient(#870511, #54030B);
    background: -webkit-gradient(linear, left top, left bottom, from(#7C0510), to(#7C0510));
    background: -o-linear-gradient(#870511, #54030B);
    text-shadow: none;
}

.ui-btn-active {
    background: linear-gradient(#898989, #bbb);
    background: -moz-linear-gradient(#898989, #bbb);
    background: -webkit-linear-gradient(#898989, #bbb);
    background: -webkit-gradient(linear, left top, left bottom, from(#898989), to(#bbb));
    background: -o-linear-gradient(#898989, #bbb);
}


#departmentOffices .ui-listview-inset .ui-li-desc, #studentAffairs .ui-listview-inset .ui-li-desc, #aswsuvOsi .ui-listview-inset .ui-li-desc {
    color: white;
    font-size:...

JavaScript

var directoryName = 'child-development-program';
$.ajax({
    type: 'GET',
    url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fdirectory.vancouver.wsu.edu%2F" + directoryName + "%22%20and%20xpath%3D%22%2F%2Fdiv%5B%40id%3D'content-area'%5D%2Fdiv%2Fdiv%22",
    dataType: 'xml',
    success: function (data) {
        if(data) {

            var textResults = $(data).find('results').text();

            $(data).find('results').find('.views-row').each(function (indexFM) {
                
                if(indexFM===0){return;}
                
                var facultyMember = this;
                
                console.log('The next line are the jQuery Objects returned');
                console.log( this );
                
                $(facultyMember).each(function (indexFC) {

                    var facultyMemberImage = $(this).find('.views-field-field-profile-image-fid #directoryimage a img').attr('src');

                    var facultyMemberTitleTEMP = $(this).find('.views-field-field-professional-title-value #largetitle').text();

                    var facultyMemberTitleUrl = $(this).find('.views-field-field-professional-title-value #largetitle a').attr('href');

                    var facultyMemberTitle = '<a href="http://directory.vancouver.wsu.edu' + facultyMemberTitleUrl + '">' + facultyMemberTitleTEMP + '</a>';

                    var facultyMemberPosition = $(this).find('.views-field-field-position-value span').text();

                    var facultyMemberPhone = $(this).find('.views-field-field-phone-value span').text();

                    var facultyMemberBuilding = $(this).find('.views-field-field-building-value span').text();

                    var facultyMemberRoom = $(this).find('.views-field-field-room-number-value span').text();

                    var facultyMemberEmailTEMP = $(this).find('.views-field-field-email-value span').text();
                    var...