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 Maximilian Stöhr
Maximilian Stöhr
7,479 Points

Problem when using multiple classes

Hi Community, the relevant Code:

<div class="second_container"></div>

.second_container {
  width: 30%;
  height: 46.25%;
  min-width: 287px;
  min-height: 231px;
  background-color: grey;
  display: inline-block;
  margin-right: 2.5%;
  margin-bottom: 2.5%;
}
.container_clicked {
  display: none;
}

$('.first_container').click(function() {
    $('.second_container').addClass('container_clicked');

The Problem: I have all the Code in Workspaces. Tried it in Chrome and Safari. If I hit the ".first_container", the Script successfully adds the Class "container_clicked" to the Index File - still, the CSS from .container_clicked gets not applied.

Any suggestions? I'm looking for an answer for over an hour now and I can't find anything.

Thanks for help :)

5 Answers

Julian Aramburu
Julian Aramburu
11,368 Points

Hey Maximilian... I think your problem resides in your comments ...you used < !-- -- > comment style that's for HTML. In your CSS files you should use /* */ comment style. I fixed that and your code works properly now :)!

Hope it helps!

Cheers and Keep Coding!

pi R
pi R
12,720 Points

Ah good job julian :p ! I didn't see it -_- :p

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

Hey Maximilian! Check this snapshot out: https://w.trhou.se/5vx4kie6vp its working fine for me! Could you post a snapshot from your workspace so we can check it out?

pi R
pi R
12,720 Points
pi R
pi R
12,720 Points

Yeah I tried your snapshot and it works fine Julian ! But I think it doesn't works on you because you didn't put the js files at the end of the body! If not, Place them at the end and It will work !

Maximilian Stöhr
Maximilian Stöhr
7,479 Points
Maximilian Stöhr
Maximilian Stöhr
7,479 Points

https://w.trhou.se/gwt8nx6x3b

Hey Guys, thanks for trying to help me! Above is the workspace - my problem is that if I click on the first_container, the other divs (2-6) remain visible, even if the .container_clicked should apply 

display: none;

to them.

I hope you are still interested and can follow my code, I know there are a lot more design/mistakes, but you should't care about them (yet :P).

Maximilian Stöhr
Maximilian Stöhr
7,479 Points
Maximilian Stöhr
Maximilian Stöhr
7,479 Points

Thanks for your help guys! Works fine for me now too! :)

Julian Aramburu
Julian Aramburu
11,368 Points

GREAT! Happy coding :D!