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

JavaScript

Posted by Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points

jQuery help on a realworld website.

I have been building a website for this non-profit called Jester Educational Theater and I am pretty happy with what I have so far. There is a feature I wanted to impliment using jQuery that I would like to talk to someone with more experience about doing the best way.

Basically I have a box with two smaller boxes nested inside of it. When one of the smaller box is clicked I want the larger box to be filled with specific content and when this new content box is clicked I want it to return back to its previous state of a box containing two boxes.

Here is a link to my project on Github. This is my first time asking for help like this so if there is a better was of uploading my project or for sharing it please let me know. Featured musicals is the section I want to manipulate.

https://github.com/ClaytonTeve/JETheater/tree/master

1 Answer

Erwin Meesters
Erwin Meesters
15,088 Points
Erwin Meesters
Erwin Meesters
15,088 Points

"I want the larger box to be filled with specific content".

My question is: where is this specific content coming from exactly? Is it already there, but hidden? Is the box going to be filled with an ajax result?

Basically you can put an event-handler on the small boxes which make content appear when you click on them. Likewise you can put an event-handler on the content boxes to make the content disappear (hidden) when clicked on. Assuming there is a div with a class of 'hidden-content-box1' in the large box (which is hidden via css -> display:none;) you can do something like this:

$('.musical_left').on('click', function(){
   $('.hidden-content-box1').show();
});

You can do the same thing for the other small box (and a div with class="hidden-content-box2").

For the content boxes:

$('.hidden-content-box1, .hidden-content-box2').on('click', function(){
   $(this).hide();
});
Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points

Thank you so much for the code examples. The hidden div idea is basically exactly how I wanted to do it, but before banging my head against the wall trying to figure out exactly what to do I wanted to talk to someone with a bit more experience first.

Thanks again. I will post a comment to the finished site when I get it up and running.