CODEWITHSUNDEEP
csscss-selectors
nimi
nimi

Reputation: 5507

How to show a div on click of an li element using css?

Using CSS, is there any way to show a div which is there inside an li element? i don't wanna use any javascript for this.

here is my sample code for this.

<ul>
   <li id="help">
      Help
        <div id="helpContainer">
           This is the help text content
        </div>
   </li>
</ul>

CSS

#helpContainer
{
display:none;
}

here it is, i wanna display helpContainer div on click of li(id=help)

Upvotes: 1

Views: 1481

Answers (5)

arttronics
arttronics

Reputation: 9955

jsFiddle DEMO

Here's a CSS3 method that hides Help until it's needed.

To view the hidden Help, click the resize widget seen at the bottom right corner and drag down vertically.

CSS3: 

.help{
  background-color: lightblue;
  width: 200px;
  height: 25px;
  min-height: 25px;
  line-height: 25px;
  max-height: 50px;
  resize: vertical;
  overflow: hidden;
}

.helpContainer {
  background-color: yellow;
  color: red;
}

Upvotes: 1

mflatischler
mflatischler

Reputation: 318

DEMO DEMO2 DEMO3

#helpContainer {
  display: none;
}

li#help:hover div#helpContainer{
  display: block;
}
li#help:target div#helpContainer{
  display: block;
}

Upvotes: 1

Rakesh Juyal
Rakesh Juyal

Reputation: 36759

As I mentioned in the comments. You can use :target.

Or if you want to go without :target .

#helpContainer{  
  float: left;
  display:none;
  position: absolute;
  padding-top: 20px;
  top: 10px;
}

#help:active #helpContainer{
  display: block;
}

#helpContainer:hover{
   display: block;
}

I made a little demo for that.
http://jsbin.com/eyavuw/1/
(source code) http://jsbin.com/eyavuw/1/edit

Upvotes: 1

Jazzepi
Jazzepi

Reputation: 5480

You must use Javascript to manipulate the DOM (Document Object Model) of the page.

This article describes how to use the #anchor tag coupled with the puesdo-class :target CSS selector (http://reference.sitepoint.com/css/pseudoclass-target). This doesn't really do what you want though (you would have to use an anchor tag to hit new # tags to put the page in different states whereas with Javascript you could just assign a listener to the onclick event on the object you actually care about), and I would never use this in practice.

Upvotes: -1

robasta
robasta

Reputation: 4701

CSS is for styling, so, you can use it to manipulate DOM elements, for that, you will need Javascript.

Upvotes: 0

Related Questions