Can I acheive this using HTML AND css only?

HTML & CSS
1

Hi there

This is my jsfiddle.net
http://jsfiddle.net/vngx/phbmf3zd/17/

What I want I want to show and hide functionality of div block without using any JS.
Is it possible to show and hide only using HTML and CSS without using JavaScript?

Thanks

2

Hi there vngx,

It certainly is…

[code]

untitled document #yes:checked ~#highSchool { display:block; } #no:checked ~#highSchool { display:none; } #highSchool{ display:none; } Yes No
Name:
Board:
[/code]

coothead

6 Likes
3

That is rather neat and it also works if the #highSchool is changed to a class. Numerous .highSchool divs can be toggled.

Magic - definitely a good bookmark.

1 Like
4

That is VERY cool. Thanks for sharing that little trick, @coothead. Any other little similar tricks you’d like to share? If so, please feel free to start a new thread to share.

5

Hi there DaveMaxwell,

I do not really consider the example to be a trick.

The CSS checked selector works in the majority of modern browsers…

http://caniuse.com/#search=checked

With a little bit of imagination it can be used to simulate javacript’s onclick event handler.

coothead

6

But you’d be surprised how many people wouldn’t have the imagination to play it like that (I certainly didn’t). I’m wondering how many other “tricks” like that are sitting under the hood.

How many things can be done in straight css that most people use javascript for?

7

A surprising amount. It’s just easier to do a line or two in JS.

His “trick” is actually well documented. Surprised it’s not well known.

1 Like
8

I use it all the time (in odd demos) and used it in a post here on Sitepoint last week to make sliding tabs :).

It is often considered a hack when used outside of a form because form elements as such should usually be used in a form. However, I think it is more akin to a button element which has uses outside of a form also.

2 Likes
9

Just note:

#no:checked ~#highSchool {
    display:none;
 }

in not necessary for this trick to work.

10

Agreed. I personally don’t care whether some random coder gives me crap for using it outside a form. It works, and you can’t really get this functionality elsewhere unless you turn to Javascript. I love using this “hack”, since you can basically get “onclick” in CSS.

:target can sorta get this click functionality but often it just doesn’t quite meet the needs you need. Page jumps, etc.

11

Oh, also … you may want to test your final code. I am not certain right of which method, right now, but I think that POST submission are sent even if a field is not displayed.

12

The name attribute will determine whether it is accessible to $_POST. If it’s not there, it will not be accessible for you to grab.

99% sure.

13

Yes… so that means if he has named a field ( say : ‘myEl1’ ) element and the form is submitted via POST … ‘myEl1’ value will be sent whether its visible in the screen or not at the time of submital.

If the case of this example, ifsomeone clicks ‘Yes’ …fills the ‘highSchoolName’ field, clicks ‘No’… the value entered in highSchoolName will still be submitted. Depending on how you hose to process the form, this could lead to issues.

14

Perhaps I’m misunderstanding you. That should be no issue. In his highschoolfield example he has two radio buttons (PHP will only grab one since it’s a radio). Do you believe that both yes/no will be sent?

If “no” is selected, then only that value will be used in POST processing.

<input id="yes" type="radio" name="userHighSchool" value="Yes">
<label for="yes">Yes</label>
<input id="no" type="radio" name="userHighSchool" value="No">
<label for="no">No</label>

Doesn’t matter which radio you choose since only one radio ($_POST[‘userHighSchool’]) will be used in post processing. Either yes or no.

It doesn’t matter how it’s set up in the post processing. I’d actually just make it true/false and filter input it to a boolean and just go from there.

Am I misunderstanding you? I’m not trying to argue - just simply understand what issue you believe is present.

15

I have posted this question by considering this thing when Java Script is not working properly

16

can you explain this thing
“~#highSchool”

a bit more what it does actually?

17

That’s really where progressive enhancement kicks in, though. Let the divs be visible by default, and hidden where JS is available.

18

I need them to be hidden whethar JavaScript is working or not.

My Point for this I am not checking whethar javaScript is working on not using this trick.
This is a part of functionality of my web page

19

Without using this trick my application was heavely depend on javaScript

20

Hi there vngx,

The tilde ( ~ ) symbol is used as a “General Sibling Selector”.

You may read all about this little devil next door, so to speak…

http://www.sitepoint.com/web-foundations/general-sibling-selector-css-selector/

coothead