Toggle button in HTML and JQuery
Question
I am trying to create a toggle button using the following, but its not working. i have included CSS, HTML and javascript snippets I am using. If I am not doing something right, kindly advice.
CSS:
.toggle-button {
margin-bottom: 15px;
}
.toggle-button img {
display: inline-block;
height: 30px;
width: 60px;
background: url(../images/on-button.png) no-repeat center center;
}
.toggle-button img.down {
background: url(../images/off-button.png) no-repeat center center;
}
HTML:
<head>
<script Language="JavaScript">
function toggle (img) {
$(img).toggleClass("down");
}
</script>
</head>
<div class="right-form">
<h2>Email Settings</h2>
<div class="toggle-button">
<label>Stock Require Scanning:</label>
<img ondblclick="toggle(this);" border="0 id="stock_require_scanning"/>
</div>
<div value="OFF" class="toggle-button">
<label>Head Office Alerts:</label>
<img ondblclick="toggle(this);" class="down" border="0" id="head_office_alerts"/>
</div>
</div>
Is there anything I am not doing right?
1 answers
solution1
1 ACCPTED 2014-04-05 12:13:43
Here you have a running demo: http://jsfiddle.net/L9nHY/ (I used the color green for "on" and red for "down"). Your made an error here:
<img ondblclick="toggle(this);" border="0" id="stock_require_scanning"/>
You have to replace this with '#stock_require_scanning' :
<img ondblclick="toggle('#stock_require_scanning');" border="0" id="stock_require_scanning"/>
The same you have to do for the other button.
Edited: Sree: See this also: http://jsfiddle.net/L9nHY/1/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.