Ok, I rewrote the script a bit… some things to note:
* Removed links inside of the article to reveal more. Added code to add these.
* Removed css to hide “.article_more”. This is important to keep the page readable in case the user has javascript disabled.
* Added links using JS.
* Changed links to toggle the view, then change the link text.
Here is an updated demo, and the code:
$(function() {
$('.article_more').hide(); // hide using js in case user has js turned off
// add more links
$(".article").each(function() {
$(this).append('More');
});
// toggle view
$(".article").on("click", ".toggle", function() {
var t = $(this);
$(this).parent().find('.article_more').slideToggle(300, function(){
t.html( $(this).is(':hidden') ? 'More' : 'Less' );
});
});
});
