JSFiddle - React, Tailwind, and code Playground

by wolfpackt99

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css">
<script src="http://turnjs.com/turn.js"></script>
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>google.load("feeds", "1");</script>
</head>
<body>
<div id="info">
    Two widgets here.  One that turns to feedwidget and one that pages divs.
</div>
<div id="container">
    <div id="widget" class="ui-widget-content ui-corner-all"></div>
    <div id="widget2" class="ui-widget-content ui-corner-all"></div>
</div>
    <script>
        $(function() {
            $("#widget2").feedWidget({'feedUrl':'http://feeds.gawker.com/gizmodo/full'});
            $("#widget").feedWidget({'feedUrl':'http://www.engadget.com/rss.xml'});
            $("#container").pager();
        });
    </script>
</body>
</html>

CSS

#info { padding: 4px; background-color: yellow; margin-bottom: 10px; }
#widget, #widget2 { width: 240px; padding: 0.4em; position: relative; }
#widget h3, #widget2 h3 { margin: 0; padding: 0.4em; text-align: center; }

JavaScript

(function($, google) {

    var methods = {
        init: function(options) {
            var settings = $.extend({
                'feedUrl': 'http://feeds.gawker.com/gizmodo/full',
                'feedCount': 3,
                'padding': '6px',
            }, options);
            return this.each(function() {
                var feed = new google.feeds.Feed(settings.feedUrl);
                feed.setNumEntries(settings.feedCount);
                var obj = $(this);
                obj.css('padding-top', settings.padding).css('padding-bottom', settings.padding).css('padding-left', settings.padding).css('padding-right', settings.padding);
                obj.on('click', "a.toggle", function() {
                    var a = $(this);
                    var content = a.parent().children("div.content");
                    if (content.is(':hidden')) {
                        content.show();
                        a.html('[-]');
                    }
                    else {
                        content.hide();
                        a.html('[+]');
                    }
                });


                feed.load(function(result) {
                    if (!result.error) {
                        obj.prepend("<h3 class='ui-widget-header ui-corner-all'>" + result.feed.title + "</h3>");
                        var html = "";
                        for (var i = 0; i < result.feed.entries.length; i++) {
                            var entry = result.feed.entries[i];
                            html += "<div id='line-item'><a href='#' class='toggle'>[+]</a> <a href='" + entry.link + "'>" + entry.title + "</a>";
                            html += "<div style='display: none;' class='content'><p style='text-align: top;'>" + entry.contentSnippet + "</p></div></div>";
                        }
                    }
                    obj.append(html);
                });
            });

        }
    }

    $.fn.feedWidget = function(method) {

        if...