March 17, 201016 yr I would like to create pages that have a fairly large text content but on initial display will only display the first paragraph or bullet points with a link option to read more... This will reveal the remaining text content, which needs to be displayed on the same page and appear to drop down or just appear. For example, if you click the ...More on this link: read more... example link This is the effect I would like to achieve but am not sure how to code? I know it can be easily done with the main cms/blog scripts (joomla etc) but I would like to code it myself if possible. Thanks for any help in advance.
March 17, 201016 yr Sounds like a job for Jquery - I don't know how comfortable you are with code, but Jquery is very easy to use. If you look through some of the examples on the jquery site, you should be able to work it out easily enough. The basic setup would be to have the intro text in one container, then the read more link, then a hidden 2nd container with the rest of the text. When the link is clicked (as in your example), the link is hidden, then the 2nd container is made visible. This can be done with javascript in a simple manner as in your example. Jquery will allow you to be a little more creative with it. Shout out if you need more help than this.
March 17, 201016 yr Author Thanks for the reply. Havent had any experience of jquery, time to go and read up. Would be interested in the javascript solution also.
March 17, 201016 yr Jquery is a javascript library. Have a look at this thread: Jquery Help See if you can use that as a starting point - its not exactly the same functionality that you're after, but its not far off....see if you can adapt it to suit.
March 17, 201016 yr Hiya Sounds like a JavaScript job, i think only JQuery would be needed if you wanted to make it fancy and animated. Here's a link to a possible solution... http://bloggerstop.net/2009/01/how-to-showhide-text-using-javascript.html Hope this helps! Matt Maclennan
March 17, 201016 yr I've just knocked this up as well, just javascript gives the same functionality as your example... <script type="text/javascript"> function show(divID,linkID){ document.getElementById(divID).style.visibility = "visible"; document.getElementById(divID).style.height = "auto"; document.getElementById(linkID).style.visibility = "hidden"; } </script> <div id="article"> <p>This is the article intro text <a id="readmore1" href="#" onclick="show('bodytext','readmore1');">...read more</a></p> <div id="bodytext" style="visibility:hidden;" ><p>This is the main body text for the article</p></div> </div> I think thats written in an easy to understand form - you should be able to adapt it from there.
March 17, 201016 yr Author Thanks for the advice and links especially craftygeek, thats exactly what I'm after. Saved me hours of searching and hit and miss coding.
March 18, 201016 yr It might be worth pointing out that the example linked to used PHP not JavaScript. However jQuery might be worth looking at, just make sure that the site still displays correctly with noscript as you don't want to rely too much on javascript for the ability to read main content. (set the default state to display all the text).
March 23, 201016 yr Author Had a chance to play with the code provided, seems to do pretty much what I was after. Hiding the text was a space saving exercise, preventing the page begining too large and displaying too much text on initial load. Then, when the option to read more was selected the page would expand to display the text. When I use the code provided above, it hides the text ok but if I have a large amount of hidden text there is a blank space on the page equivalent to the amount of text. I have tried to get the the page to resize when the read more option is clicked but have been unsuccessful. Would jquery be a better option to achieve this?
March 24, 201016 yr Author Spent a bit more time researching the javascript route and eventually achieved what I needed to. This is the code I ended up with: <head> <!-- start of hide/unhide script --> <script type="text/javascript"> function unhide(divID) { var item = document.getElementById(divID); if (item) { item.className=(item.className=='hidden')?'unhidden':'hidden'; } } </script> <!-- end of hide/unhide script --> </head> The body code: <body> <a href="javascript:unhide('text1');">Read more....</a> <div id="text1" class="hidden"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque gravida convallis dui, eu lobortis ante auctor non. Curabitur tempus, nisl aliquet dignissim semper, sem leo porttitor dolor, mollis imperdiet nibh urna et lorem. Vivamus at nibh eget augue lobortis pretium. Praesent vitae leo eu libero blandit auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis eros quam, pretium ac pulvinar id, vulputate sed lorem.</p> </div> </body> Two CSS classes created: .hidden {display: none;} .unhidden {display: block;} This will hide the text on page display and toggle the hide when the link is clicked. It also resizes the page as the div is hidden/unhidden.
Create an account or sign in to comment