Occasionally I see articles where you just get the intro text (1-2 paragraphs), then it fades, then there's a Read More button and when you click it the rest of the article appears (not "loads", it's already loaded, it just flips a CSS switch).
If I could find one, I could see what they're using, but I can't find one right now and my Google searches have not turned up what I want.
So basically looking for that setup. I assume the reason people do it is for the analytics - who is actually interested enough to click Read More?
Anyone know offhand
a) a script that does this (or a Wordpress plugin or Drupal module)
b) a site that has this on it so I can look under the hood?
Found one. This site does it on mobile (or, in my case, if you emulate an iPhone 5 in Chrome).
http://qz.com/476914/i-built-a-twitter-bot-that-entered-and-won-1000-online-contests-for-me/
QZ.readFull = function () {
// make sure we know this method was used so the app work correctly
QZ.readFullUsed = true;
var readFullArticle = document.querySelector(".read-full");
if ( readFullArticle ) {
readFullArticle.classList.remove("read-full");
}
};
.read-full .read-full-story-button {
display: block
}
article.item.read-full {
max-height: 180vh
}
article.item.read-full:after {
z-index: 1;
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 200px;
border-bottom: 35px solid #f9f9f9;
background: -moz-linear-gradient(top, rgba(249, 249, 249, 0) 0, #f9f9f9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(249, 249, 249, 0)), color-stop(100%, #f9f9f9));
background: -webkit-linear-gradient(top, rgba(249, 249, 249, 0) 0, #f9f9f9 100%);
background: -o-linear-gradient(top, rgba(249, 249, 249, 0) 0, #f9f9f9 100%);
background: -ms-linear-gradient(top, rgba(249, 249, 249, 0) 0, #f9f9f9 100%);
background: linear-gradient(to bottom, rgba(249, 249, 249, 0) 0, #f9f9f9 100%)
}
}
and in the <body>
<article id="item-476914" class="item global article has-hero" itemscope itemtype="http://schema.org/NewsArticle">
blah blah blah
<div class="after-article"></div>
<button class="read-full-story-button" onclick="QZ.readFull();">Read full story</button></article>
So from there it's a matter of some sort of event tracking on click...
Interesting twitter bot. Can't help with the code :(