Switch Between Tumblrs and Tweets

without 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='-Izlb05y3xIcoKetU2_NHA';
		// ------------------------------------------------------------
		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 < limit; ++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!');}
					++limit;continue;
				}
				if(typeof tag2ignore !== 'undefined' && post['tags'].includes(tag2ignore)) {
						if(DEBUG){console.log('--Post Flagged to be ignored! '+tag2ignore);}
						++limit;continue;
				}
      }
      dataHref = embedApiHref + post['id'];
      recent = document.createElement('div');
      recent.setAttribute("class", "tumblr-post");
      recent.setAttribute("data-href", dataHref);
      html = "&lt;noscript&gt;&lt;li&gt;&lt;a href='" +
       ...

CSS

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

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

.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");
}