0

I been working for a while trying to have my link show and hide a paragraph below it.

I need to accomplish this using only CSS. The paragraph must be hidden on load and show once the link is clicked and then hide again when link is clicked again.

How can I accomplish this?

<a …………………>My link</a>
<p>Sed ut perspiciatis unde omnis iste natus</p>

I would really appreciate any help..

irm
  • 4,073
  • 6
  • 28
  • 32
  • check out this answer - http://stackoverflow.com/questions/3660046/css-next-element – nycynik Aug 08 '13 at 02:05
  • 2
    CSS can't respond to clicks, you'll have to use javascript unfortunately. It's doable on hover in CSS only. – Rick Calder Aug 08 '13 at 02:05
  • possible duplicate of [Toggle text display using pure CSS :hover pseudo-class](http://stackoverflow.com/questions/16095644/toggle-text-display-using-pure-css-hover-pseudo-class) – kba Aug 08 '13 at 02:06

2 Answers2

2

Short answer: You need javascript.

After all, that's what it is intended for: user interaction, among other cool things. CSS on the other hand is oriented towards the presentation, thus its interaction features are limited (for example, it responds to hover action but not to click action in the way you expect it).

The only idea that comes to my mind is using a checkbox to control the click "states" and in css display something based on that status.

HTML:

<label><input type="checkbox">My link
<p>Sed ut perspiciatis unde omnis iste natus</p>
</label>

CSS:

input[type="checkbox"] {display: none;}
input[type="checkbox"] + p {display:none; margin-left:1em;}
input[type="checkbox"]:checked + p {display:block;}

Check out this Fiddle

However, this solution could not be the best cross-browser wise, so we go back to "Javascript" ;)

typologist
  • 394
  • 3
  • 10
0

You do not have to use JavaScript to do this. You can do this purely with CSS. Here is an example of how that might be done:

http://jsfiddle.net/rACvb/1/

CSS

.toggle {display: block;}
.toggle-label { color: blue; text-decoration: underline; }
.toggle-label:hover {text-decoration: none; cursor: pointer; }
#Clicker {display: none;}
#Clicker:checked + .toggle {display: none;}

HTML

<label for="Clicker">Click it</label>
<input id="Clicker" class="click-detect" type="checkbox" />
<p class="toggle">
    This paragraph shows because the link hasn't been clicked. It will hide when you click the "Click It" text. Honest!    
</p>

Explanation:

  1. We are creating a checkbox which has a :checked pseudo selector. This is an easy way to determine whether something has been clicked or not.
  2. We are hiding the checkbox because we don't want to see it.
  3. Now you can style the label however you want. You can make it look pretty, I've made it look like a traditional link.
  4. When the label is clicked it checks the checkbox.
  5. There is a adjacent sibling selector in the css that hides the adjacent paragraph when the checkbox is checked.

Also, this site explains a number of ways you can get this working with css purely: http://tympanus.net/codrops/2012/12/17/css-click-events/

The problem really is that you are now relying on a "hack" to make this work. In the end you have to decide whether relying on a hack is what you want to do to solve the problem. If that's the only thing you can do, well then... that's what you have to do!

jeremysawesome
  • 7,033
  • 5
  • 33
  • 37