CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user3847870
user3847870

Reputation: 410

Bootstrap collapse not showing content when clicked

I have just started learning bootstrap.I have encountered this problem regarding collapse.Collapse is not showing content when clicked.It does nothing when its clicked,I have tried everything from updating jquery's link ,removing button div out of header,using id instead of class in ul's parent div but nothing seems to be working for me.I know it must be a newbie mistake but for some reason i cant figure it out.

Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initialscale=
1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5
elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the
page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/
3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/
1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="" class="navbar-brand">My Website</a>
<button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="">Page 1</a></li>
<li><a href="">Page 2</a></li>
<li><a href="">Page 3</a></li>
</ul>
</div>
</div>
</div>
<h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/
jquery.min.js"></script>   
<!-- Include all compiled plugins (below), or include individual files
as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Upvotes: 1

Views: 5295

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388436

It should be data-toggle="collapse" not datatoggle="collapse"

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

Demo: Fiddle

Upvotes: 1

Related Questions