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
Samuel Johnson
9,152 PointsTrying to dynamically load content
I have section halfway down a page which has three headers that i want to use as a button to load content dynamically into a div below so you can switch between them easily?
Has anyone found any videos that could help me with this? such as using as using the .load() like below?
```$('a').click(function() { $('#LoadMe').load($(this).attr('href'));
return false;
}); ```
Ideally i want the content to be loaded from an external page or div but i dont mind if it has to be internally and i hide the content using CSS or something?
Or even if there is an easier way just to do this with CSS?
Any ideas or help?
Thanks in advance!
6 Answers
Matt Campbell
9,767 PointsAre you looking to make a tabbed section? Something like the tabbed box on this page? http://www.thecitymembersclub.com/venues/1-lombard-street/
It's a combo of jQuery and CSS. You need two parts to the tabs. A part that's got the buttons in to change the content and a part that has the content.
You stack the content on top of each other and then just change the z-index when you click a button to bring it to front. That's the super simple way to do it.
I've got some code somewhere to make a tabs section, I'll find it.
Samuel Johnson
9,152 PointsYes, that would work fine and i was thinking of doing it that way or at least with display hidden just because using z-index would still load the content and be an inefficient way of doing it surely?
I just wanted to find out if there are any demos available for using something like ajax loading or just a simple .load() function.
Although maybe im wrong and your way is the most efficient just feels wrong if theres lots of content to be loaded?Also with your way what jQuery would you be using?
Matt Campbell
9,767 PointsHi Samuel Johnson,
Yes you're right. My explanation was pretty crap and it's actually not the way I'd do it. Was confusing myself with something else I'm doing. Display:hidden will work better.
If you're pulling the content in from another source, you're asking for more work to be done as you're making 3 requests instead of one and the user is going to have to wait for the content to download.
I really wouldn't worry about having the content on the page at load. It's going to end up there anyway.
Even if it was a several hundred meg video, it wouldn't matter. Media gets downloaded after everything else, hence why pictures load last.
Samuel Johnson
9,152 PointsDo you know of any demos that do this? I must be doing something wrong with my loading because ive made countless versions and cant find a decent demo anywhere!
Matt Campbell
9,767 PointsDid you look at the tabbed section on the link I posted? Did that fit the bill?
I can send you to code via email if it does.
Samuel Johnson
9,152 PointsThanks, I had a look at it but it felt like the pages loaded a little slowly? Not sure if that was to do with the code though or my internet? :)
I ended up using this link: http://blixt.org/articles/tabbed-navigation-using-css#section=introduction
The only reason i wanted to using it for was a section of a page similar to the "Services" section on this site http://klpersonaltrainer.co.uk/ My client also happens to be a fitness instructor and i want to display lots of information in the same div with a little tabbed bit above..
Thanks for replies though :) is that a site your currently building?
Matt Campbell
9,767 PointsSite's very very quick, either your net or the server.
Built that for a client a few months ago, doing a bit more to it now.
Samuel Johnson
9,152 PointsThe only thing that annoys me is the seo part of it because by clicking a tab it creates a new page and doesnt create good UX. I did find one purely in CSS that works but i need to adjust it to not be in a list..
http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/
This is the link and was a pretty good walk through..