Welcome to WebmasterWorld Guest from 35.172.100.232

Forum Moderators: open

Toggle Switch Button does not show up

     
4:00 pm on Sep 6, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Oct 25, 2006
posts: 1104
votes: 1


I have tested Toggle Switch Button. How to fix an issue as it does not react.


<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bootstrap 3 Toggle Switch</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h2>Bootstrap Switch Button</h2>
<p class="page-header">Simple Toggle Buttons for Bootstrap 3</p>
<h4>Large</h4>
<div class="btn-group btn-toggle">
<button class="btn btn-lg btn-default">ON</button>
<button class="btn btn-lg btn-primary active">OFF</button>
</div>
<hr>

<h4>Medium (default)</h4>
<div class="btn-group btn-toggle">
<button class="btn btn-default">ON</button>
<button class="btn btn-primary active">OFF</button>
</div>
<hr>

<h4>Small</h4>
<div class="btn-group btn-toggle">
<button class="btn btn-sm btn-default">ON</button>
<button class="btn btn-sm btn-primary active">OFF</button>
</div>
<hr>

<h4>Tiny</h4>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">ON</button>
<button class="btn btn-xs btn-primary active">OFF</button>
</div>
<hr>

<h4>More Switch Examples</h4>
<ul class="list-inline">
<li>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">ON</button>
<button class="btn btn-xs btn-success active">OFF</button>
</div>
</li>
<li>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">ON</button>
<button class="btn btn-xs btn-danger active">OFF</button>
</div>
</li>
<li>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">ON</button>
<button class="btn btn-xs btn-info active">OFF</button>
</div>
</li>
<li>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-success">Y</button>
<button class="btn btn-xs btn-danger active">N</button>
</div>
</li>
<li>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">1</button>
<button class="btn btn-xs btn-primary active">0</button>
</div>
</li>
<li>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-primary active">Preview</button>
<button class="btn btn-xs btn-default">Source Code</button>
</div>
</li>
<li>
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-info">Yes</button>
<button class="btn btn-xs btn-primary active">No</button>
</div>
</li>
</ul>
<hr>

<!-- collapse example -->
<h4>Collapse (Show/Hide)</h4>
<div class="btn-group btn-toggle">
<button class="btn btn-default" data-toggle="collapse" data-target="#collapsible">Open</button>
<button class="btn btn-primary active" data-toggle="collapse" data-target="#collapsible">Close</button>
</div>
<div class="well collapse" id="collapsible">
Hello world. Here I am.
</div>
<hr>


<!-- form radio buttons example -->
<h4>Form Radio Buttons</h4>
<form class="form">
<div class="btn-group btn-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" value="option1"> Option 1
</label>
<label class="btn btn-default">
<input type="radio" name="options" value="option2" checked=""> Option 2
</label>
</div>
<button class="btn btn-default">Submit</button>
</form>

</div>

<!-- script references -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>



and Javascript

$(document).ready(function(){$('.btn-toggle').click(function() {
$(this).find('.btn').toggleClass('active');

if ($(this).find('.btn-primary').size()>0) {
$(this).find('.btn').toggleClass('btn-primary');
}
if ($(this).find('.btn-danger').size()>0) {
$(this).find('.btn').toggleClass('btn-danger');
}
if ($(this).find('.btn-success').size()>0) {
$(this).find('.btn').toggleClass('btn-success');
}
if ($(this).find('.btn-info').size()>0) {
$(this).find('.btn').toggleClass('btn-info');
}

$(this).find('.btn').toggleClass('btn-default');

});

$('form').submit(function(){
alert($(this["options"]).val());
return false;
});
});

10:31 pm on Sept 9, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 15, 2003
posts:2639
votes: 5


I think you need to include the toggle library files:

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

As per:
[bootstraptoggle.com...]
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members