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

Samantha Atkinson
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 41,385 Points
Posted by Samantha Atkinson
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 41,385 Points

Creating one of those containers that open up to reveal a whole divs content

Hi,

I am being brave and have created a website for a local dance school. On the page for teachers I want the viewer to click on a link "Read More" and for the whole div or article to open in the center of the page and for them to close and go back to where they started. Like Treehouse has on their students perk page.

I thought the answer was using jQuery from Andrew's overlay image gallery lesson. Clearly this is not the answer. I am still working through Front End Development track and currently at AJAX stage. Is there a lesson in that track that would teach me how to create that kind of thing?

Does it require JavaScript or jQuery, or is it possible with css only and I'm being brain dead.

2 Answers

Steven Parker
Steven Parker
243,898 Points
Steven Parker
Steven Parker
243,898 Points

Traditionally, modal dialogs with animated reveals (I think that's what you're talking about) would be done with JavaScript, possibly with some JQuery involved. But the newer facilities of CSS including transitions, transforms, and animations can accomplish similar things. I know these are all introduced in the CSS Beyond the Basics course.

But you can't beat a thorough understanding of JavaScript, which I believe (without a thorough dissection) is mostly responsible for the behavior of the student perks page here.

Samantha Atkinson
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 41,385 Points
Samantha Atkinson
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 41,385 Points

Thanks Steven, I was thinking along the lines of using transitions or transforms as I don't feel that I'm really on top of JavaScript yet, so maybe I will go the transition, transform and animation route and see if I can make it work, but I think might still might need jQuery , too as Andrew did for closing the overlay.

Samantha Atkinson
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 41,385 Points
Samantha Atkinson
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Front End Web Development Techdegree Graduate 41,385 Points

Hi Steven,

Ok I feel a little ashamed as I didn't really know what a modal dialog was. But thanks to you I found a CSS only course on Treehouse, and now have a better clue what they are and now if I see one on the web I'll know what it is. Thank you

james white
james white
78,399 Points
james white
james white
78,399 Points

Hi Samantha,

I would check the caniuse site for CSS3 transitions:

http://caniuse.com/#feat=css-transitions

I still have people I know (many in corporate environments) using WinXP, which only supports IE8.

Last time I checked WinXP was still at 17% for all windows users.

Personally I would recommend JQuery - it's much more widely supported under older browsers and is one of the most stable and widely used javascript libraries out there.

The mobile version of JQuery even support Opera mini to a limited (B-grade) extent;

https://dev.opera.com/articles/opera-mini-content-authoring-guidelines/#javascript

https://jquerymobile.com/browser-support/1.4/

---By the way the more widely used category "term" for

these AJAX-related controls is "accordion" controls:

https://jqueryui.com/accordion/

http://inspirationalpixels.com/tutorials/creating-an-accordion-with-html-css-jquery

http://www.jacklmoore.com/notes/jquery-accordion-tutorial/

http://www.surfingsuccess.com/jquery/basic-jquery-ui-accordion-tutorial.html#.Vp4UtleJuBo

http://uniondesign.ca/simple-accordion-without-jquery-ui/