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

CSS

Shan W.
Shan W.
4,910 Points
Posted by Shan W.
Shan W.
4,910 Points

Links with "#" don't seem to work.

Hi,

This is the part I'm working on:

<section class="profile infobox">
     <a class="expand" href="#"><h2 class="exp">Profile</h2></a>
     <a class="collapse" href="#"><h2 class="col">Profile</h2></a>
     <div class="content">
         <p>Lorem blah blah</p>
     </div>
</section>

.expand, .collapse { text-decoration: none; }
.collapse, .content { display:none; }
.expand:focus ~ .collapse { display:block; }
.expand:focus { display:none; }
.expand:focus ~ .content { display:block;}

For some reason, it works on Chrome 33, but nothing higher. It works on Firefox 29 too. But nothing higher. I have Chrome and Firefox portable on a USB drive. When I try this on those browsers, it works fine. When I try it on the FF and Chrome installed on my PC, (FF 30, Chrome 37), the links don't work. And by don't work, I mean clicking doesn't do anything.

Also, when I try it on Android, Chrome doesn't work. On Firefox it does, but lags.

I don't think there's anything complicated about this code right? All I want is for it to expand and collapse.

Any help?

EDIT: I closed the section tag! What I want happening is, initially when the page loads, only one "profile" should be visible, and none of the "content" in the div. When I click the Profile, it should show the body. When I click again, it should hide the body. This doesn't happen in certain browsers (the ones I've mentioned). And on Android.

Jason Founts
Jason Founts
Courses Plus Student 14,384 Points

What do you mean by "don't seem to work"? I dumped this in codepen on Chrome 35 and the links were links. I did notice you didn't close your section tag but presumed this was just part of your code.

2 Answers

Ryan Drake
Ryan Drake
12,587 Points
Ryan Drake
Ryan Drake
12,587 Points

You could define a class in CSS that says "Don't show the text in here" then use JS from the hyperlink click to switch the class of the element?

So your html will contain (as an example):

<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a> <div id="text1" class="hide"> text1 </div> <a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a> <div id="text2" class="hide"> text2 </div> Your CSS would contain:

div.hide { display:none; [your properties]; } div.show { [your properties]; } and the your JS would look something like this:

function showText(show,hide) { document.getElementById(show).className = "show"; document.getElementById(hide).className = "hide"; } Does this help at all?

Shan W.
Shan W.
4,910 Points
Shan W.
Shan W.
4,910 Points

I really didn't want to use JS. I wanted to stick to just CSS/HTML for this! The thing is, it works just fine on some browsers (as I stated in my original post). For instance, if you see this link:, it works (shows and hides the content) on my portable browsers. But on my desktop browsers, it remains a link, but doesn't actually work. I can see the url getting a "#" symbol at the end of the url, but it doesn't hide/show. I can't understand why it doesn't work in some browsers!