Menu
I want to have a text to only be a certain amount of characters/length and after that length, I want to put a link to reveal the full length of the text.
The link will be (more...). And once the user clicks the link (more..) the rest of the text will slide down.
How would I accomplish this?
Heres an example.
blah blah blah blah blah (more...) When the user clicks (more..), it will show the entire text.
NOTE: I am taking a about data in a table row/table cell, not just any text.
609
The function takes two arguments, a div containing only the words "show more" [or whatever] and a div containing the originally hidden text and the words "show less." The function displays the one div and hides the other. Show activity on this post. You can also use details HTML tag which does the work for you.
Go to Site pages (under the Website menu) and begin editing the site page where you want the link to appear. Click the Gadgets icon to display the list of available gadgets. Drag the custom HTML gadget from the Gadget list (not a content gadget), and drop it in the desired location.
The secret about this effect, is wrapping the parts that you want to control with HTML tags.
$(".more").toggle(function(){ $(this).text("less..").siblings(".complete").show(); }, function(){ $(this).text("more..").siblings(".complete").hide(); }); <span class="teaser">text goes here</span> <span class="complete"> this is the complete text being shown</span> <span class="more">more...</span> Online demo here: http://jsfiddle.net/zA23k/215/
83
$('#more').click(function(e) { e.stopPropagation(); $('div').css({ 'height': 'auto' }) }); $(document).click(function() { $('div').css({ 'height': '40px' }) }) Click on Read more to expand the text. Click outside to minimize it again.
43
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
