I want to create a toggle button in html using css. I want it so that when you click on it , it stays pushed in and than when you click it on it again it pops out.
If theres no way of doing it just using css. Is there a way to do it using jQuery?
+2
A:
I would be inclined to use a class in your css that alters the border style or border width when the button is depressed, so it gives the appearance of a toggle button.
Galwegian
2008-11-21 15:20:15
A:
Vincent Van Den Berghe
2008-11-21 15:21:53
Doesn't work in Chrome.
Donny V.
2008-11-21 15:23:53
Apparently, it doesn't work in IE either... Sorry :-(
Vincent Van Den Berghe
2008-11-21 15:31:59
+2
A:
You could use an anchor element (<a></a>), and use a:active and a:link to change the background image to toggle on or off. Just a thought.
Edit: The above method doesn't work too well for toggle. But you don't need to use jquery. Write a simple onClick javascript function for the element, which changes the background image appropriately to make it look like the button is pressed, and set some flag. Then on next click, image and flag is is reverted. Like so
var flag = 0;
function toggle(){
if(flag==0){
document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img1.gif";
flag=1;
}
else if(flag==1){
document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img2.gif";
flag=0;
}
}
And the html like so
<div id="toggleDiv" onclick="toggle()">Some thing</div>
trex279
2008-11-21 15:30:36
A:
You can use the "active" pseudoclass (it won't work on IE6, though, for elements other than links)
a:active
{
...desired style here...
}
Nouveau
2008-11-21 15:37:43
A:
This cannot be done solely with html and css (within a single page). It is doable with JavaScript.
Traingamer
2008-11-21 16:09:08
+4
A:
If you want a proper button then you'll need some javascript. Something like this (needs some work on the styling but you get the gist). Wouldn't bother using jquery for something so trivial to be honest.
<html>
<head>
<style type="text/css">
.on {
border:1px outset;
color:#369;
background:#efefef;
}
.off {
border:1px outset;
color:#369;
background:#f9d543;
}
</style>
<script language="javascript">
function togglestyle(el){
if(el.className == "on") {
el.className="off";
} else {
el.className="on";
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="button" class="off" onclick="togglestyle(this)" />
</body>
</html>
monkey do
2008-11-21 16:09:25
+21
A:
The good semantic way would be to use a checkbox, and then style it in different ways if is checked or not. But there are no good ways do to it. You have to add extra span, extra div, and, for really nice look, add some javascript.
So the best solution is to use a small jQuery function and two background image for styling the two different status of the button. Example with a up/down effect given by borders:
HTML
<a id="button" title="button">Press Me</a>
CSS
a {
background: #ccc;
cursor: pointer;
border-top: solid 2px #eaeaea;
border-left: solid 2px #eaeaea;
border-bottom: solid 2px #777;
border-right: solid 2px #777;
padding: 5px 5px;
}
a.down {
background: #bbb;
border-top: solid 2px #777;
border-left: solid 2px #777;
border-bottom:solid 2px #eaeaea;
border-right: solid 2px #eaeaea;
}
JQUERY
$(document).ready(function(){
$('a#button').click(function(){
$(this).toggleClass("down");
});
});
Obviously, you can add background images that rapresent button up and button down, and make background color transparent.
alexmeia
2008-11-21 16:20:51
A:
Being new to this site, I wasn't sure if solutions can be given in external links, but I love the solution presented here: mooSwitch 0.6
+1
A:
There's a jquery plugin by Swizec, which can do this among other things: http://swizec.com/code/styledButton/
Nickolay
2009-10-02 10:08:13
A:
JQuery UI makes light work out of creating toggle buttons. just put a regular old
`<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox id="myToggleButton" />`
on your page and then in your body onLoad or your $.ready() (or some object literals init() function if your building an ajax site..) drop some JQuery like so:
`$("#myToggleButton").button()`
thats it. (don't forget the < label for=...> because JQueryUI uses that for the body of the toggle button..) from there you just work with it like any other input="checkbox" because that is what the underlying control still is but JQuery UI just skins it to look like a pretty toggle button on screen.
bkdraper
2010-07-20 00:09:39