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
Jeremy Coleman
5,449 Pointsusing jQuery to toggle divs (urgent)
I have 7 div's overlapping each other. Using jQuery I am able to toggle them on and off, however I am wanting to make it so that if div one has been toggled and div two gets toggled, div 1 automatically toggles off.
here is the code I am using for this. I am using CSS Transforming and Transitioning for animations.
$(function() { $('.home').on('click', function() { $('.content-home').toggleClass('open') }); });
$(function() { $('.about').on('click', function() { $('.content-about').toggleClass('open') }); });
Thank you in advance!
7 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Jeremy,
I see you've got it working but I'll go ahead and post my solution since I've already done the work and it may benefit you or someone else.
It's 3 lines of jquery and should work for any number of content div's without modification to the jQuery and minimal addition to to the html.
I've included a codepen demo as a proof of concept. It contains some of your html/css. http://codepen.io/anon/pen/yNaOQo
The solution makes the following assumptions:
- Only the links that will toggle a div have a "toggle" class
- The only direct children of the wrapper div are the content divs
- Each link that toggles a div will have a data-toggle attribute added which indicates the class of the div to toggle
If the html changes then the code would need to be adjusted accordingly.
Example link:
<li><a href="#" class="home toggle" data-toggle="content-home">Home</a></li>
The data-toggle attribute indicates that it's going to toggle the "content-home" div. Each link needs this.
The jQuery code with comments:
// Assign a click handler to all links with a toggle class
$('.toggle').click(function(){
// Retrieve the data-toggle attribute for the link that was clicked
classToToggle = $(this).data('toggle');
// 1. Concatenate a dot in front of the class name to create a proper class selector
// 2. Toggle the 'open' class for that specific div
// 3. Then select the siblings of that div and remove the 'open' class from any of those div's that might have it.
$('.' + classToToggle).toggleClass('open').siblings().removeClass('open');
});
Each new piece of content should automatically work once you add in the 'data-toggle' attribute.
Let me know if you have any questions about it.
Ryan Field
Courses Plus Student 21,242 PointsHi, Jeremy. In that case, what you want to do is remove the class open from all the divs first, and then add it to the one that was clicked. Something like this:
$('.home').on('click', function() {
$('.content-home').removeClass('open');
$(this).addClass('open');
});
This is assuming all seven divs have the home and content-home classes. In any case, the basic idea is the same; take the class you want to toggle off everything first, and then apply it only to the one that was clicked.
Jeremy Coleman
5,449 PointsI tried using that code as well. I'll be a little more specific. I have a navigation menu which is toggled by pressing a button. The navigation items toggles it's own content section. But if more then one content is toggled, they begin to overlap each other, which clearly is not wanted. So I need to make it so that once another as been toggled the other gets un-toggled.
I can link you too the website I am working on if you'd like.
Jason Anello
Courses Plus Student 94,610 PointsLinking to the website or showing the html structure would be your best bet so you can get a solution appropriate to your situation.
Jeremy Coleman
5,449 Pointswww.cyberbitdesigns.com This is what I ended up with, it works but like I said I think there is a more logical way to this.
$(function() {
$('.home').on('click', function() {
$('.content-home').toggleClass('open');
$('.content-portfolio').removeClass('open');
});
});
Jason Anello
Courses Plus Student 94,610 PointsI take it you have to do that for each one?
There is probably a more logical way to do it but I could not figure out the expected behavior.
If you'd like me to look into it more please clarify what's supposed to happen.
What should happen if I click on "portfolio" twice?
I see that the navigation menu slides back and forth, what's going on with that?
Which menu items is this supposed to work for? You mentioned 7 div's initially.
Jeremy Coleman
5,449 PointsSo if you toggle the navigation, it will turn on or off via the MENU button. If you click Home, the Home div should come up. If you click home again it will toggle off. If home is toggled and you click portfolio, home will toggle off and portfolio will toggle on. If portfolio is toggled and you click another item on the menu then it will toggle off and the desired item will toggle on.
There will be 7 div's total when the project is finished.
Jason Anello
Courses Plus Student 94,610 PointsI'm not seeing this behavior but maybe you don't have that implemented yet. The navigation is supposed to stay on the left when you have that working correctly? I see it slide left and right as I click on items.
It's possible then that you will have no content showing when the same link is clicked on?
I have an idea on how to solve this and hopefully I'll be able to post it soon.
Jeremy Coleman
5,449 PointsI have gotten it working, I'll update it right away. But now I have another issue, the content is above the navigation. The navigation menu is supposed to do that, but I might change that as it could get annoying for users.
Sorry for all the hassle lol, new to this whole jQuery thing along with positioning.
Jason Anello
Courses Plus Student 94,610 PointsThat's alright.
Try giving your navigation a z-index of 1 and that should put it above your content div's.
Jeremy Coleman
5,449 PointsThat actually does help a lot thank you for that!
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome, glad it helped.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Jeremy,
Are you trying to implement something like an accordion?
Can you show the html for this? You don't necessarily need to show the content of the div's but the main structure.
As far as I can tell you have separate elements that you're clicking on which are toggling the div's.
Is it correct that only 1 div at a time can have the 'open' class?