read more
Tutorials
Below you will find an example of the more / less function.
If you like it you can see below the example and how to create it yourself.
This is the example for the option to create in x5 a less/more button for extra text on your page.
Copy it if you think it is usefull. No strings attached.
Let me know if there are any questions.
Best Regards, AndreE
Copy it if you think it is usefull. No strings attached.
Let me know if there are any questions.
Best Regards, AndreE
Set this code in a HTML object
<div style="text-align:left">
<span class="more">
This is the example for the option to create in x5 a less/more button for extra text on your page.<br>
Copy it if you think it is usefull. No strings attached.<br>
Let me know if there are any questions.<br>
Best Regards, AndreE<br>
</span>
</div>
Set this code in step3 on your page, use properties button, goto expert, set it in "before closing head tag"
<script type="text/javascript">
$(document).ready(function() {
// Configure/customize these variables.
var showChar = 103; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "More >";
var lesstext = "Less <";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<style>
.morecontent span {
display: none;
}
.morelink {
display: block;
}
</style>
That's it
Have fun.