Javascript/Show More Content

Advertisement


Question
Hello Kevin. This is my code. http://jsfiddle.net/burn123/w2gWy/ I have a few problems.

1. How would I implement a sliding effect on the click of the link?
2. I would like to be able to add div's to this code so that I could add a text indent to each paragraph, but every time I try to put a div inside of the .main>div, the script breaks

Thank you!

Answer
Hi Cody,

Thank you for your question.

1. I'm not 100% clear on what you want to "slide". If you want the text that appears after the first 250 characters to "Slide down / slide up" instead of just showing / hiding, then you will need to put each chunk of text in its own container (i.e. a DIV or a SPAN, etc...) and then use the jQuery slideUp() / slideDown() methods:

http://api.jquery.com/slideDown/

http://api.jquery.com/slideDown/

2. To add a DIV to the inside of the div.main > div, just use jQuery's append() or prepend() methods, which I have done at the end of your JS code (I made the text red so that it is easier to see. Use Firebug to inspect and see their place in the DOM).

http://api.jquery.com/append/

http://api.jquery.com/prepend/

Here is a link to your code with some JS added at the end, which appends / prepends some red text: http://jsfiddle.net/5RkTC/

Best Wishes,

Kevin  

Javascript

All Answers


Ask Experts

Volunteer


Kevin Chisholm

Expertise

I can answer questions about: JavaScript, Object-Oriented JavaScipt, JSON, AJAX, jQuery, HTML, CSS

Experience

I am a Front-End Web Developer living in New York City. I have provided services to titles such as Time.com, TimeForKids.com, SportIllustrated.com, coastalliving.com, People.com, TDAmeritrade.com, and Instyle.com. Being particularly passionate about Object-Oriented JavaScript as well as Web Standards, I spend a fair amount of time writing about / teaching Front-End Web Development techniques. In my free time I enjoy reading about advanced JavaScript, as well as Web Development trends and best practices. My Blog is: http://blog.kevinchisholm.com/ JavaScript-specific blog posts can be found here: http://blog.kevinchisholm.com/category/javascript/

Organizations
NYC Front-end Developers CSS3 / HTML5 The future of front end Front-End Engineers Javascript Syracuse University Alumni Network

Education/Credentials
Syracuse University - VPA - 1983 - 1987

Past/Present Clients
cookingchanneltv.com foodnetwork.com food.com hgtv.com diynetwork.com gactv.com frontdoor.com hgtvremodels.com travelchannel.com Time.com TimeForKids.com SportIllustrated.com coastalliving.com People.com TDAmeritrade.com ramirezco.com njsga.org soccercoliseum.com superdomesports.com afeenj.org

©2016 About.com. All rights reserved.