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

Konrad Pilch
Konrad Pilch
2,435 Points
Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Help to decript this code in css or js i don tknow CSS/JS

How can i make this in pure CSS ?

I tried to take out the Sass put i believe something is worong in JS then?

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Thank you both and thank you for the compiled version, but i know what i did wrong, i deleted the 'a'.

Which i believe the 'a' is selecting the links in the tab thats why thsi wasnt working .

And thank you for Chyno for that as well.

Thank you!

2 Answers

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey man. I don't think this will be possible. JS is needed to manage the 'onclick' event. You could do a version of it using the ':hover' class and set up the HTML so the revealed content is a sibling to the tab. I imagine the CSS would look something like this

#all:hover ~ div[class='course'] {
    display: block;
}

#html:hover ~ div[class='course html'] {
    display: block;
}

This kind of what you are thinking?

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

p.s. I may have misunderstood the question :)

Chyno Deluxe
Chyno Deluxe
16,936 Points

Yeah. I'm a bit confused on the questions too.

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Looking at it now, I think it may have been what you mentioned. Haha. My head is too far in the Adv CSS selectors at the moment =p

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

on the css tab click "view compiled" it will then convert the sass to css.

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

If it was what Chyno said, the below is the compiled CSS :)

#article {
  float: left;
  width: 60%;
}
#article .course {
  padding: 1% 4%;
  margin: 1%;
  background: #ddd;
  border-radius: 25px;
}
#article .course.html h3:after {
  content: " (HTML)";
  float: right;
  color: #0af;
}
#article .course.css h3:after {
  content: " (CSS)";
  float: right;
  color: #44f;
}
#article .course.javascript h3:after {
  content: " (JavaScript)";
  float: right;
  color: #a00;
}
#article .course.ios h3:after {
  content: " (iOS)";
  float: right;
  color: #0df;
}

#aside {
  float: right;
  width: 30%;
}
#aside a {
  display: block;
  padding: 3% 5%;
  margin: 5%;
  text-align: center;
  text-decoration: none;
  color: #000;
  background: #fff;
  border: 1px solid #888;
  border-radius: 20px;
}
#aside a#html {
  color: #0af;
}
#aside a#css {
  color: #44f;
}
#aside a#javascript {
  color: #a00;
}
#aside a#ios {
  color: #0df;
}