CSS tricks or javascript

Question

I want to add a function to this HTML and CSS code.

HTML

<div class="switch">
  <input name="sincro" type="radio" checked="checked">
  <label>O</label>
  <input name="sincro" type="radio">
  <label>I</label>
</div>

CSS

.switch {position:relative; overflow:hidden; border:1px gray solid; background-color:white; }
.switch label {position:relative; z-index:2; float:left; width:50%; height:100%; -webkit-transition:all 0.1s ease-out; -moz-transition:all 0.1s ease-out; transition:all 0.1s ease-out; background-color:gray; }
.switch input {position:absolute; z-index:3; opacity:0; width:100%; height:100%; -moz-appearance:none; }
.switch input:hover, div.switch input:focus {cursor:pointer; }
.switch input:checked {display:none; }
.switch input {display:block; }
.switch input:first-of-type + label {left:-50%; }
.switch input:first-of-type:checked + label {left:0%; }
.switch input:last-of-type + label {right:-50%; left:auto; background-color:green; }
.switch input:last-of-type:checked + label {right:0%; left:auto; }

In practice, I would keep graphically the function that simulates the ON and OFF of the button and implementing the functionality to show and hide one DIV with a specific ID="".

I tried with only CSS or with javascript but it doesen't work completely because if works the simulation of the botton the hide and show doesn't work...Help please!!!

More importantly, will you put the relevant parts of your code in your question? — Frédéric Hamidi
– Frédéric Hamidi, Commented May 19, 2014 at 8:40
Did you try jquery? Regarding showing, hiding a div you could take a look at api.jquery.com/show or api.jquery.com/hide — Prastow
– Prastow, Commented May 19, 2014 at 8:41

berto · Accepted Answer · 2014-05-19 08:56:59Z

1

Sounds to me like you want to show or hide a div based on whether a radio option is selected. I put together the following fiddle that toggles the display of a div based on a button:

http://jsfiddle.net/pYVys/

It uses the Bootstrap CSS library for styling and jQuery for the logic. All this does is toggle the btn-info CSS class on the button to change its color and the hidden class on a div to show/hide it based on the button clicks.

The HTML is very simple:

<button id="toggle-button" class="btn">Toggle</button>
<div id="hidden-div" class="hidden">I am in the div</div>

And the JavaScript is minimal:

$('#toggle-button').click(function () {
    $(this).toggleClass('btn-info');
    $('#hidden-div').toggleClass('hidden');
});

answered May 19, 2014 at 8:56

berto

8,5634 gold badges27 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2295617 Over a year ago

Thanks, but it is not what I want. I tried to incorporate your suggestion to my code but it does not work because i don't want to use the tag button, the DIV does not appear. jsfiddle.net/Fwxe6/1

berto Over a year ago

Nice work. I my JavaScript to work with your fiddle here: jsfiddle.net/Fwxe6/5. Also, check out bootstrap-switch.org, makes the switch super pretty. Fiddle using it here: jsfiddle.net/Fwxe6/7

Collectives™ on Stack Overflow

CSS tricks or javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related