Benjamin Oats Benjamin Oats - 3 months ago 7
Javascript Question

Twitter like feature: click to reveal hidden text

I am trying to create a link that once you click it unlocks text.

I think I am almost there, but i am not sure how to show the hidden text, bellow is what I have so far. If someone could point me in the right direction that would be good.

HTML

<section id="container">
<p>Click to show content. <a href="#" id="tweetLink">Tweet Me.</a></p>
<p class="hidden-text">Locked</p>
</section>


JS

(function ($) {

var win = null;

$.fn.tweetAction = function (options, callback) {



options = $.extend({
url: window.location.href
}, options);

return this.click(function (e) {

if (win) {

e.preventDefault();
return;
}

var width = 550,
height = 350,
top = (window.screen.height - height) / 2,
left = (window.screen.width - width) / 2;

var config = [
'scrollbars=yes', 'resizable=yes', 'toolbar=no', 'location=yes',
'width=' + width, 'height=' + height, 'left=' + left, 'top=' + top
].join(',');

win = window.open('http://twitter.com/intent/tweet?'+$.param(options),
'TweetWindow',config);

// Checking whether the window is closed every 100 milliseconds.
(function checkWindow() {

try {


if (!win || win.closed) {
throw "Closed!";
}
else {
setTimeout(checkWindow, 100);
}
}
catch (e) {

win = null;
callback();
}

})();

e.preventDefault();
});
};

})(jQuery);


JS

$(document).ready(function(){

$('#tweetLink').tweetAction({
text: 'First tweet',
url: '#',
via: 'website'
},function(){


$('hidden-text')
{
// action here

}

});

});

Answer

JS

// to show an element that's hidden, you can use .show() or just remove the class

// option 1:
$(".hidden-text").show();

// option 2:
$(".hidden-text").removeClass("hidden-text");

CSS

.hidden-text {
  display: none;
}
Comments