Menu
I want to be able to display a shortened version of a long text field by default, but then have a "read more" link that would expand the field to its full version. I have a pretty simple setup right now, but feel like there should be a more efficient way of doing this.
Here's my current code:
$(document).ready(function () {
$("#narrative-full").hide();
$("a#show-narrative").click(function() {
$("#narrative-short").hide();
$("#narrative-full").show('fast');
});
$("a#hide-narrative").click(function() {
$("#narrative-full").hide();
$("#narrative-short").show('fast');
});
});
This works, but seems clunky. For example, it would be nice to have the original text not flicker or disappear briefly, but instead just smoothly expand. Any suggestions?
239
Here is the complete jQuery code: $(document). ready(function() { var nInitialCount = 150; //Intial characters to display var moretext = "Read more >"; var lesstext = "Read less"; $('. longtext').
html(short_content+ '<a href="#" class="read_more"><br/>read more... </a>'+ '<span class="more_text" style="display:none;">'+long_content+'</span>'); /* Alter the html to allow the read more functionality */ $(this).
var carLmt = 300; // Text to show when text is collapsed var readMoreTxt = " ...read more"; // Text to show when text is expanded var readLessTxt = " read less"; //Traverse all selectors with this class and manipulate HTML part to show Read More $(". add-read-more"). each(function () { if ($(this).
From jQuery Recipes:
<html>
<head>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".message").hide();
$("span.readmore").click(function(){
$(".message").show("slow");
$(this).hide();
});
});
</script>
</head>
<body>
<div>
Styles make the formatting job much easier and more efficient.
</div>
<span class="readmore">Read More...</span>
<div class="message">
To give an attractive look to web sites, styles are heavily used.
JQuery is a powerful JavaScript library that allows us to add dynamic elements to our web
sites. Not only it is easy to learn, but it's easy to implement too. A person must have a
good knowledge of HTML and CSS and a bit of JavaScript. jQuery is an open source project
that provides a wide range of features with cross-platform compatibility.
</div>
</body>
</html>
You could place the text in a div and place the first part directly in and the rest in a span within the div
<div>
first part of the text
<span id="expendable" style="display:none">
second part of the text
</span>
</div>
In Jquery you do something like this:
$("expendable").slideToggle("slow");
The Jquery ref is here.
33
Check these plugins.You can do this easily.
jQuery Expander
Readmore.js
Simple Jquery and CSS usage.Not the plugin
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
