To be perfectly honest don't really know what I did which finally got it going because I was playing around with so many combinations,
The Js script that they give you on the link page, simply paste and copy into the <head> section at the beginning of the page you wish to have the paragraph (s) doing the "show more "show less function.
EG (before)
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thor Garage English Version</title>
<link rel="stylesheet" href="css/coffeegrinder.min.css">
<link rel="stylesheet" href="css/wireframe-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<!-- Start of the headers for !CoffeeCup Menu Builder -->
<link rel='stylesheet' type='text/css' href ='../new_menu/stylesheets/menu_builder.css'/>
<link rel='stylesheet' type='text/css' href ='../new_menu/stylesheets/style.css'/>
<script type="text/javascript" src="../new_menu/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../new_menu/js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script type="text/javascript" src="../new_menu/js/tinynav.js"></script>
<script type="text/javascript" src="../new_menu/js/mb.js"></script>
<!-- End of the headers for !CoffeeCup Menu Builder -->
</head>
EG (after)
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thor Garage English Version</title>
<link rel="stylesheet" href="css/coffeegrinder.min.css">
<link rel="stylesheet" href="css/wireframe-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<!-- Start of the headers for !CoffeeCup Menu Builder -->
<link rel='stylesheet' type='text/css' href ='../new_menu/stylesheets/menu_builder.css'/>
<link rel='stylesheet' type='text/css' href ='../new_menu/stylesheets/style.css'/>
<script type="text/javascript" src="../new_menu/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../new_menu/js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script type="text/javascript" src="../new_menu/js/tinynav.js"></script>
<script type="text/javascript" src="../new_menu/js/mb.js"></script>
<!-- End of the headers for !CoffeeCup Menu Builder -->
<script>$(document).ready(function() {
// Configure/customize these variables.
var showChar = 300; // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show 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>
</head>
NOTE you need put the <script> tag at the beginning and the </script> tag at the end once you have pasted the code yourself because it is'nt, included in the original script you copy.
Now I am actually using RLMP not RSD (still saving my pennies to get that one day) so there may be a different way in RSD for pacing the text, but in my case I gave a container a class which I could easily see (from within my html editor) for the paragraph, and then inserted the text that I wanted (within RLMP) so I could judge the format etc.
Moving into the HTML editor,
I picked up the paragraph in code view, and renamed it to <span class="more" >
I copied the .css code from the link page into my .css folder for that page.
Boom it worked wonderful except obviously all the styling for the paragraph was lost, so some more work on the .css needed to style the fonts & colour highlights etc.
Because I put the paragraph inside a container within RLMP (so I can add flexbox stuff toit from .css with my html editor, that flexy stuff that goes on (easy to do with RSD, but a little bit harder to do with RLMP) holds the format for smaller devices viewpoints etc etc.
works a treat
if you feel like having a look www.thorgarage.com is up temporarily (choose english version) you can see it in action and look at the page source to maybe see it in better detail.
Sorry forr the essay, hope it is clear enough
Have a great day wherever in the world you are.
Wayan
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
