JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="tweets">
    <ul id="twitter_update_list"></ul>
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/gabromanato.json?count=5&callback=twitterCallback2"></script>
</div>

CSS

#tweets {
    margin: 2em auto;
    width: 400px;
    font: 90% Arial, sans-serif;
}

#tweets li {
    margin-bottom: 0.5em;
    padding-bottom: 5px;
    border-bottom: 1px dotted #333;
}

#tweets a {
    color: #038;
    font-size: 1em !important;
}


#tweets a#more {
    display: block;
    width: 6em;
    padding: 0.3em 0.5em;
    background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
    color: #fff;
    border-radius: 5px;
    border: 1px solid #038;
    text-decoration: none;
    text-align: center;
}

JavaScript

$(function() {
    
    var TweetsList = {
        
        ul: $('#twitter_update_list'),
        
        hide: function() {
            
            var context = this.ul;
            
            $('li', context).not(':first').hide();
            
        },
        
        
        more: function() {
            
            var target = this.ul;
            
            $('<a/>').attr({href: '#', id: 'more'}).text('More Tweets').
            insertAfter(target);
            
        },
        
        
        collapse: function() {
            
            var context = this.ul;
            
            $('#more').live('click', function(e) {
                
               var $a = $(this);
               var defaultText = 'More Tweets';
               var newText = 'Hide';
               var set = $('li', context).not(':first');
                
                if(set.is(':hidden')) {
                    
                    set.slideDown('slow');
                    $a.text(newText);
                    
                } else {
                    
                    set.slideUp('slow');
                    $a.text(defaultText);
                    
                }
                
                
                e.preventDefault();
                    
                    
                               
                
            });
            
        },
            
        
        
        init: function() {
            
            this.hide();
            this.more();
            this.collapse();
            
        }
        
    };
    
    TweetsList.init();
    
});