Use Only CSS to Alter Various Elements

Question

I have a page with a left sidebar that I want to be able to toggle on or off based on whether or not the user clicks it. Unfortunately entering JavaScript code on this website has been disabled and I only have access to CSS.

The left sidebar has

its main div (parentBlock)
a div for the show/hide, (toggleBlock)
a div for the logo, (div1)
a div for the navbar, and (div2)
a div for social icons (div2)

When the user clicks on "Show / Hide" I want to:

Hide (display:none) the logo, navbar, and social div's, and
Set the height of the main div to something smaller (say 30px).

Is there any way to do this in CSS?

<div class="parentBlock">
  <div class="toggleBlock">Show / Hide</div>
  <div class="divBlah">div1</div>
  <div class="divBlah">div2</div>
  <div class="divBlah">div3</div>
</div>

Then if the user clicks "Show / Hide" again, it will unhide the div's and set the height back to filling the screen.

Is this possible?

I found some code that would work if the "Show / Hide" button was in "parentBlock" but it didn't work if it was within "toggleBlock" (and I have to have the Show/Hide button in toggleBlock) (http://tympanus.net/codrops/2012/12/17/css-click-events/)

I realize onClick events require JavaScript. Those are not possible since I can't use JavaScript :( Some people try to get around it by using either :active or creating checkboxes and having the checkbox:clicked value load the action ... but it only works with certain relations that I can't seem to nail down.

Unfortunately I cannot alter the ultimate structure of "toggleBlock", div1, div2, and div3 ... only what's in them and their CSS. Also making it even more difficult is that the website randomly generates ID="" each time the page loads so the TARGET method isn't possible. Also, the 3 div's (div1 thru div3) have the same class name. I'm beginning to think it's impossible :(

(For reference, I'm trying to use the tools on the New SmugMug and they're rather restrictive)

I don't think you can use CSS with `click` events without Javascript. Check this out: http://stackoverflow.com/questions/13630229/onclick-in-css — Joum, Sep 13 '13 at 08:42
@Joum Yea, I found that one and it lead me to look into the 'checkbox hack'. I couldn't get it to work though, because I think my relations to the other DIV's aren't nice :( — Aaron Meyers, Sep 13 '13 at 09:04
@Mr_Green: Essentially div1 is the logo, div2 is the navbar, and div3 is the social. I tried to simplify and generalize when pasting in some code — Aaron Meyers, Sep 13 '13 at 09:06
@Mr_Green: "parentBlock" -- I updated my original post to be more clear — Aaron Meyers, Sep 13 '13 at 09:10

score 2 · Answer 1 · answered Sep 13 '13 at 09:05

2

Here is a CSS only solution using target

DEMO http://jsfiddle.net/kevinPHPkevin/r4AQd/

.button {
    display: block;
    width:60px;
    background: red;
     z-index:1;
}
#element {
    display: none;
    background:#fff;
    margin-top:-20px;
    z-index:2;
}
#element:target {
    display: block;
}
#show:target {
    display: block;
}
#hide {
    background: #000;
    color: #fff;
}

answered Sep 13 '13 at 09:05

Kevin Lynch

24,427
3
36
37

You never cease to amaze me Vector! – Sep 13 '13 at 09:07
@Vector: I should have mentioned that SmugMug randomly assigns ID's each time the page loads so the #target method wouldn't work :( – Aaron Meyers Sep 13 '13 at 09:12
Then a 'checkbox HACK' would be the only way with CSS only. – Kevin Lynch Sep 13 '13 at 09:14

score 1 · Answer 2 · answered Sep 13 '13 at 09:05

As Joum has pointed out this is not possible to do via click events but using hover on siblings you might be able to achieve a similar effect. for example try adding this css:

div.toggleBlock { display: block; }
div.toggleBlock ~ div { display: none; }
div.toggleBlock:hover ~ div { display: block; }

for more information see this: http://css-tricks.com/child-and-sibling-selectors/

Use Only CSS to Alter Various Elements

2 Answers2