/    Sign up×
Community /Pin to ProfileBookmark

css display:hidden

Hey

Okay so i’m kind of new to css and what i’m trying to do is create a navigation link of 5 items and upon clicking each link, the previous contents will be hidden and the new content for that link will be displayed.

I tried using a few sites I found but it didn’t work.

[url]http://stylizedweb.com/2008/09/10/simple-showhide-with-css/[/url]
(this one really doesn’t work.

[url]http://www.willmaster.com/blog/css/show-hide-div-layer.php[/url]
(this one gave me a mozilla firefox error saying it can’t support javascript yet ive used javascript in a lot of places)

Can somebody please help or at least tell me where i’m going wrong. I’ve been trying to figure this out for awhile and have had no avail.

Here’s my code so far:

[code]
<ul id=”menu”>

<li id=”who”><a href=”#” id=”who”><span></span>Who</a></li>
<li id=”what”><a href=”#” id=”what”/><span></span>What</a></li>
<li id=”team”><a href=”#” id=”team”><span></span>Team</a></li>
<li id=”beliefs”><a href=”#” id=”beliefs”><span></span>beliefs</a></li>
<li id=”partners”><a href=”#” id=”partners”><span></span>partners</a></li>
<li id=”news”><a href=”#” id=”news”><span></span>news</a></li>

</ul>

[/code]

#menu span
{
display:block;
position:absolute;
}

#menu a:hover span
{
display:block;
}

#who span
{
height:11px;
width:11px;
left:35px;
top: -20px;
}

# what span

{
height:11px;
width:11px;
left:35px;
top: -10px;
}

[code]

[/code]

to post a comment
CSS

0Be the first to comment 😎

×

Success!

Help @rizla111 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...