PURE CSS show/hide div way?

Question

Does it really not exist any pure css method where I can click on some desired :active div id on my website, and maybe another div show up besides it or something? Everything I've found so far is either a bad way done with CSS or a ways done with JQuery or Javascript? Anybody, anybody PURE CSS I need. thanks!

Can you share the methods you've seen and tried, and tell us what you specifically did not like about them? — Jeroen, Jan 15 '13 at 15:01
CSS can only affect child or sibling elements, not those elsewhere in the page. — Diodeus - James MacFarlane, Jan 15 '13 at 15:02
I've done dropdown menus by linking into :hover, but as Diodeus mentions, you can only affect children or siblings. (and one you leave the bounding box, it goes away immediately, which some people w/ shaky hands don't like) And of course, it's not touch-friendly. — Joe, Jan 15 '13 at 15:04
No, "pure CSS" way doesn't exist for this, since a click, for e.g., is an event in the browser's JavaScript interpreter's context. You can, however, and I think this is what you are looking for, implement such a DOM manipulation w/o using JavaScript other than some short INLINE statements (like onclick="..js here.."). — marekful, Jan 15 '13 at 15:05
Well various websites I've been reading on, which only achieve the show/hide div effect through the use of :hover :focus :active etc. None have really made it function the way I want. Nor have I tried all of them, but I tested the demo they've supplied under all the code in the end. I feel unfortunately like Javascript is a dirty language for some strange reason. I also really don't like implementing it into my CSS and HTML code, because I already use Rails with it. And I only wish that Rails could do this for me. — MarcusTheBuilder, Jan 15 '13 at 15:06
Trying to get the most out of CSS is admirable, but in regards to your issue with Javascript I can only say: Get over it. Javascript is a great language, if you stick to [The Good Parts](http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742). Without Javascript your site, if even only slightly complex, will not be as user friendly as it could be for the vast majority of your users (only a tiny minority view sites with devices that don't support Javascript). — Joe Dyndale, Jan 15 '13 at 15:15
possible duplicate of [What is the simplest way to implement pure css show/hide?](http://stackoverflow.com/questions/6189064/what-is-the-simplest-way-to-implement-pure-css-show-hide) — user, Apr 08 '15 at 00:41

score 1 · Answer 1 · edited May 23 '17 at 11:53

1

in CSS div doesn't have onclick handler.. you need to put your div inside a

'< a >'

tag.. so you can handle it like a link.. and you will have the functionality of mouse hover and something like this.. take a look at this thread

edited May 23 '17 at 11:53

Community

1
1

answered Jan 15 '13 at 15:06

Elior

3,178
6
37
67

thats a clever trick for getting the mouse event, but you still have to use javascript to define the mouse handler code that actually displays the new div – Jan 15 '13 at 15:18

score 0 · Answer 2 · answered Jan 15 '13 at 15:05

You can try :target

Or use child A B, next A+B or sibling A~B selectors.

But pure css methods can't save and manipulate states of blocks so widely as simple js which just add/remove classes.

score 0 · Answer 3 · 2013-01-15T15:53:47.917

0

When specifying CSS for a particular html element, you have limited capability to affect the style of the element which is receiving the mouse event. to show another element when you click a particular element, you need to change the style of another html element that is not the target of the mouse event, therefore javascript, or a proprietary web scripting language like vb is required to do what you want to do.

The last thing I'll say about this is that CSS is intended for adding style effects to individual elements or groups of elements. It is not intended to implement heavy programmatic functionality on a website. That is what javascript was invented for.

edited Jan 15 '13 at 15:53

answered Jan 15 '13 at 15:07

Well in that case, what is the easiest, fastest to learn, easiest to use, easiest to understand web scripting language you can recommend to me. Please give multiple recommendations because I don't want to have an ultimatum. – MarcusTheBuilder Jan 15 '13 at 15:10
the only standard web script that works across all browsers is javascript. Proprietary scripting languages like Visual basic,only work in Internet Explorer, or as 3rd party extensions to other other browsers. With the right extension, you can use perl, python, or w/e language you want in your browser, but the user then has to have that plugin installed for their browser in order for the page to work – Jan 15 '13 at 15:13
the world wide web consortium (the group that decides what becomes a web standard) has great tutorials on using javascript that could probably teach you what you need fairly quickly. you can find their tutorial at: http://www.w3schools.com/js/default.asp – Jan 15 '13 at 15:15

score 0 · Answer 4 · answered Mar 14 '13 at 02:32

You can try, :active pseudo class. But even then, you need to wrap whatever you wanna show inside it. Anyway, my try is:

<a>
  Click and Hold Me!
  <div class="expand">
    I am the expander!
  </div>
</a>

CSS

a {text-decoration: none;}
a .expand {height: 0; overflow: hidden; transition: height 5s;}
a:active .expand {height: 1em; overflow: visible; transition: height 5s;}

Fiddle: http://codepen.io/praveenscience/pen/KArEB

score 0 · Answer 5 · edited May 23 '17 at 12:07

Here is a Pure CSS method to show-hide. Place 'title' content in a container element. Place 'info' content, under 'title' but inside same container. Now, style behaviors to respond to click activity.

.dropdowntitle, article > * { cursor: pointer; }
.dropdowntitle:focus + .dropdowninfo { display:block; }
.dropdowninfo { background-color:inherit; display:none; height:inherit; }

<article>
<h3 class="dropdowntitle" tabindex="1">Title</h3>
<p class="dropdowninfo">Info</p>
<h3 class="dropdowntitle" tabindex="2">Title</h3>
<p class="dropdowninfo">Info</p>
<h3 class="dropdowntitle" tabindex="3">Title</h3>
<p class="dropdowninfo">Info</p>
</article>

Pros Focus user on just one info dropdown at-a-time. Simple drop-down double click close-open navigation in longer 'listings'. Does not interfere with browsing history.

Cons Far as basic HTML/CSS can go (tooltip data-title attribute to replace title attribute: click/tap HTML data layer to overlay dropdown title)? JQuery, then programatics to take this over edge, definitely.

http://tympanus.net/codrops/2012/12/17/css-click-events) Checkbox and target hacks I tried, but no improvement.

Show / hide div on click with CSS Similar thread.

HTML/CSS show/hide multiple elements? Mainly script solutions

https://support.office.com/en-us/article/Create-or-edit-a-hyperlink-5d8c0804-f998-4143-86b1-1199735e07bf Show-hide multiple dropdowns simultaneously and independently, programmatic.

score 0 · Answer 6 · answered Oct 29 '17 at 06:23

CSS can not handle event onClick. You can use Javascript .onclick() function. But CSS have Pseudo-classe may be helpfull:

a:link {color:#FF0000;}    /* unvisited link - link is untouched */
a:visited {color:#00FF00;} /* visited link - user has already been to this page */
a:hover {color:#FF00FF;}   /* mouse over link - user is hovering over the link with the mouse or has selected it with the keyboard */
a:active {color:#0000FF;}  /* selected link - the user has clicked the link and the browser is loading the new page */

See more in https://www.w3schools.com/css/css_pseudo_classes.asp

PURE CSS show/hide div way?

6 Answers6

Fiddle: http://codepen.io/praveenscience/pen/KArEB