viswa46 Posted October 15, 2013 Share Posted October 15, 2013 Hi Everyone, I've use case lets us say in a paragraph i've 100 lines i need to display first 50 lines and other 50 lines should not be displayed.But when i click on Read More link all the lines should be displayed(100 lines). When the 100 lines are displayed then the close link should be enabled and when i click on the link 50 lines should be displyed. Thanks in advance!! Link to comment Share on other sites More sharing options...
terryds Posted October 15, 2013 Share Posted October 15, 2013 I'm thinking of measuring the character length using strlen(), and, if it's more than 300 characters, cut the string using substr(), then, add a link that will set $_GET['more'], and when the $_GET['more'] is set, it will return the string ... Link to comment Share on other sites More sharing options...
davej Posted October 15, 2013 Share Posted October 15, 2013 If you simply place a span around the portion of the text to be toggled you could apply a class with display:hidden and then have the more link add or remove that class and also change the link text between more and close. Link to comment Share on other sites More sharing options...
Hadien Posted October 27, 2013 Share Posted October 27, 2013 add this css: p.collapsible{ overflow:hidden;/*content outside <p>'s dimensions are hidden*/ max-height:50em;/*only shows upto first 50 lines of text*/}p.collapsible.expand{ overflow:auto;/*in case <p>'s parent has a height limit*/ max-height:none;/*removes lines limit*/} then add this javascript in your <head><script> tag. function toggleCollapse(DomEle){ var classes = DomEle.className.split(" "); for(var i=0;i<classes.length;i++){ if(classes[i] == "expand"){ DomEle.className = classes.splice(i,1).join(" "); return; } } DomEle.className = classes.unshift("expand").join(" ");}// simple cross-browser function for adding events to DOM elementsvar addEvent = (function () { var L = function (el, ev, fn) { if (el.addEventListener) { L = function (el, ev, fn) { el.addEventListener(ev, fn, false); }; } else if (el.attachEvent) { L = function (el, ev, fn) { el.attachEvent('on' + ev, fn); }; } else { L = function (el, ev, fn) { el['on' + ev] = fn; }; } L(el, ev, fn); }; return function (el, ev, fn) { L(el, ev, fn); };}());//adds toggleCollapse to all <p> tags with a "collapsible" classaddEvent(body,"load",function(){ var domPs = document.getElementsByTagName("p"); ontoNextDom: for(var i=0; i<domPs.length;i++){ var classes = domPs[i].className.split(" "); for(var c=0;c<classes.length;c++){ if(classes[i]=="collapsible"){ addEvent(domPs[i],"click",toggleCollapse(domPs[i])) continue ontoNextDom; } } }}); Or if you are using jQuery you can ignore all the previous javascript code and instead add this into a <script> tag at the very bottom of the page: $("p.collapsible").click(function(){ $(this).toggle("expand");}); OR you can get away with no javascript if you instead replace p.collapsible.expand with p.collapsible:hover in the CSS. however you'll need to keep the cursor over the paragraph for all lines to show. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now