Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

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

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

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

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?