Clever Geek Handbook

Data toggle object not working

I have looked for different solutions but no one has helped me so far. My dropdown doesn't work because the data toggle and data target are not "recognized" (at least that's why I believe it doesn't work). I can't seem to find a solution, so I hope someone here can help me. 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, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        .box{
            background-color: #d3d3d3;
            border: 1px solid gray;
        }
    </style>
</head>
<body>

    <div class="navbar navbar-inverse">
        <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><a href="">Page 1</a></li>
                    <li><a href="">Page 1</a></li>
                    <li><a href="">Page 1</a></li>

                </ul>

            </div>
        </div>
    </div>

    <h1>Hello, world!</h1>

    <div class="container">
        <div class="row">
            <div class="col-md-6 box">Content</div>
            <div class="col-md-6 box">Content</div>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>

https://jsbin.com/jumuka/edit?html,output

+3


source to share


1 answer


Do you datatoggle="collapse"

need it data-toggle="collapse"

.



+3


source






More articles:


All Articles