Switch Between Tumblrs and Tweets

with collapse button support

by Chris Vitalos

HTML

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <!-- 
		.
		insert this inline Javascript just prior to the closing </head> tag -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
    <script>
      // -- DEBUG flag
      var DEBUG = 1;
      // -- tumblrBlogID must be pulled from Tumblr v1 API response -- 
      var tumblrBlogId = 'LeWQqtovV6GbmyI-0QBb9Q';
      // ------------------------------------------------------------
      function embedTumblrPosts(loc, limit, tag2ignore) {
        if (!tumblr_api_read) {
          console.log("tumblr_api_read json data block is empty!");
          return;
        }
        var response = tumblr_api_read.posts;
        var len = response.length;
        var block = document.getElementById(loc);
        var embedApiHref = "https://embed.tumblr.com/embed/post/" + tumblrBlogId + "/";
        var post;
        var recent;
        var html;
        for (var i = 0; i < len; ++i) {
          post = response[i];
          if (DEBUG) {
            console.log("id=" + post['id']);
            console.log('url-slug: ' + post['url-with-slug']);
            console.log("i=" + i + " len=" + len + " limit=" + limit);

          }
          if (typeof post['tags'] !== 'undefined') {
            if (DEBUG) {
              console.log('post tag array:' + post['tags']);
            }
            if (post['tags'].includes('hidden')) {
              if (DEBUG) {
                console.log('--Post Flagged to be hidden!');
              }
              continue;
            }
            if (typeof tag2ignore !== 'undefined' && post['tags'].includes(tag2ignore)) {
              if (DEBUG) {
                console.log('--Post Flagged to be ignored! ' + tag2ignore);
             ...

CSS

.timeline-button {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: transparent;
}

.timeline-button-social {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: white;
}

.down-arrow {
	background-image: url("https://svgshare.com/i/_VV.svg");
}

.right-arrow {
	background-image: url("https://svgshare.com/i/_Vf.svg");
}

.up-arrow {
	background-image: url("https://svgshare.com/i/_Tp.svg");
}