Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Ashley Shay
Ashley Shay
8,664 Points
Posted by Ashley Shay
Ashley Shay
8,664 Points

Replacing Content?

I'm working on the "services" page of a website for a hairstylist. It consists of an image aligned next to a div which contains a short description of the service (say, a woman's haircut), the price for that service, and a button to make an appointment. Directly under that div are links for "Women," "Men," and "Children."

What would I need to do in order to have the description, the price, and the image all change when the user clicks one of the other links? The content for "Women" would be the default.

Can I do this with CSS, or would I need to use JavaScript... or something else? :)

Thanks!

3 Answers

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

Hi Ashley.

The simplest way would be to hide the content and use jQuery to add a CSS class to the content you want to make visible when the approprpriate button is clicked. Something similar to this: http://tympanus.net/codrops/2010/04/28/pretty-simple-content-slider-with-jquery-and-css3/ http://tympanus.net/Tutorials/PrettySimpleContentSlider/

or this (without the exploding background): http://tympanus.net/codrops/2011/03/28/moving-boxes-content/ http://tympanus.net/Tutorials/MovingBoxesContent/

Ashley Shay
Ashley Shay
8,664 Points
Ashley Shay
Ashley Shay
8,664 Points

Ok, I'll check those out. I just finished the CSS Foundations course, but I haven't gotten into jQuery yet... I'll have to dive in and try it out. :)

Thanks!

Ashley Shay
Ashley Shay
8,664 Points
Ashley Shay
Ashley Shay
8,664 Points

Ok, so after having gone through more jQuery training here and at Code School... I'm still stuck. I figured out how to replace the price by adding the differing prices as data-attributes to the appropriate links. But I wasn't sure if that method would be workable and/or appropriate for the service description (a longer string of text) and the image?

If I don't use that method, how could I get the elements I hide to replace the default/current text upon clicking the appropriate link instead of just becoming visible beneath the current text?