Collapse button is showing but not working after click in bootstrap 3.3 and jquery 1.1

Question

This code is not working it showing the 3 horizontal bar button but after click nothing happens to that. bootstrap-3.3 jquery-1.1

Toggle navigation CopyHere

        <div class="collapse navbar-collapse" id="navbar">
           <ul class="[ nav navbar-nav navbar-right ]">
              <li class="[ visible-xs ]">
                 <form action="http://bootsnipp.com/search" method="GET" role="search">
                    <div class="[ input-group ]"> <input type="text" class="[ form-control ]" name="q" placeholder="Search for snippets"> <span class="[ input-group-btn ]"> <button class="[ btn btn-primary ]" type="submit"><span class="[ glyphicon glyphicon-search ]"></span></button> <button class="[ btn btn-danger ]" type="reset"><span class="[ glyphicon glyphicon-remove ]"></span></button> </span></div>
                 </form>
              </li>
              <li><a href="http://copyhere.online/" class="[ animate ]"><span class="fa fa-plus" style="color:green;"> Create New</span></a></li>
              <li><a href="http://copyhere.online/about.php" class="[ animate ]"><span class="fa fa-user" style="color:purple;"> About</span></a></li>
              <li><a href="http://copyhere.online/policy.php" class="[ animate ]"><span class="fa fa-legal" style="color:red;"> Policy</span></a></li>
              <li><a href="http://copyhere.online/terms.php" class="[ animate ]"><span class="fa fa-info" style="color:blue;"> Terms</span></a></li>
              <li class="[ hidden-xs ]"><a href="http://copyhere.online/index.php#toggle-search" class="[ animate ]"><span class="[ glyphicon glyphicon-search ]"></span></a></li>
           </ul>
        </div>

score 1 · Answer 1 · answered Dec 06 '19 at 04:39

Your HTML code seems fine but was surprised to see the big bracket in class name.

What i think is you might have loaded bootstrap twice in your HTML page which makes toggle event to execute twice, which results the collapse class toggle twice. Inspect your HTML and see the class being changed twice.

score 0 · Accepted Answer · answered Dec 06 '19 at 04:51

You might have not added correct id to navbar-toggle data-target attribute. Please try this code

<script
     src="https://code.jquery.com/jquery-1.12.4.js"
     integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
     crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
<div class="collapse navbar-collapse" id="navbar">
           <ul class="[ nav navbar-nav navbar-right ]">
              <li class="[ visible-xs ]">
                 <form action="http://bootsnipp.com/search" method="GET" role="search">
                    <div class="[ input-group ]"> <input type="text" class="[ form-control ]" name="q" placeholder="Search for snippets"> <span class="[ input-group-btn ]"> <button class="[ btn btn-primary ]" type="submit"><span class="[ glyphicon glyphicon-search ]"></span></button> <button class="[ btn btn-danger ]" type="reset"><span class="[ glyphicon glyphicon-remove ]"></span></button> </span></div>
                 </form>
              </li>
              <li><a href="http://copyhere.online/" class="[ animate ]"><span class="fa fa-plus" style="color:green;"> Create New</span></a></li>
              <li><a href="http://copyhere.online/about.php" class="[ animate ]"><span class="fa fa-user" style="color:purple;"> About</span></a></li>
              <li><a href="http://copyhere.online/policy.php" class="[ animate ]"><span class="fa fa-legal" style="color:red;"> Policy</span></a></li>
              <li><a href="http://copyhere.online/terms.php" class="[ animate ]"><span class="fa fa-info" style="color:blue;"> Terms</span></a></li>
              <li class="[ hidden-xs ]"><a href="http://copyhere.online/index.php#toggle-search" class="[ animate ]"><span class="[ glyphicon glyphicon-search ]"></span></a></li>
           </ul>
        </div>
         </div><!-- /.container-fluid -->
</nav>

Collapse button is showing but not working after click in bootstrap 3.3 and jquery 1.1

2 Answers2