How to use the data target in bootstrap?-CodePudding

<button id="btn-id"  type="button" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
    <span ></span>
     <span ></span>
      <span ></span>
</button>
<a href="#" >MyBrand</a>
                <!-- Collect the nav links, forms, and other contents for toggling -->
                <div  id="bs-navbar-collapse-1">
                <ul >
                <li ><a  href="#">Sports</a></li>
                <li ><a  href="#">Activities</a></li>
                <li ><a  href="#">Contact Us</a></li>
            </ul>
</div>

I can get this error:

The 'data-target' attribute value should be the id of the tag for toggling elements like navigation links, forms, and other contents

I need a solution for this error.

CodePudding user response：

As mentionned by @Diego , it seems that bootstrap.js is not included. Take care about the thing that jQuery should be included too, and before bootstrap.js.

Bootstrap 4 still requires jQuery 1.9.1 or higher, but you’re advised to use version 3.x since v3.x’s supported browsers are the ones Bootstrap supports plus v3.x has some security fixes.

You don’t need jQuery in Bootstrap 5 (the last one today(Nov 2022), but take care because you used bootstrap-4 tag in your post, i don't really know which one you use), but it’s still possible to use our components with jQuery. If Bootstrap detects jQuery in the window object, it’ll add all of our components in jQuery’s plugin system.

CodePudding user response：

You were probably missing to include the bootstrap js assets because the collapse feature requires that also and the css is not enough.

I'm taking for granted we are talking about Bootstrap 4.0 since that's the tag you used in your question.

This is the official page documenting the collapse feature:

https://getbootstrap.com/docs/4.0/components/collapse/

This is the official page documenting the assets:

https://getbootstrap.com/docs/4.0/getting-started/introduction/

I show it here:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

<button
  id="btn-id"
  
  type="button"
  data-toggle="collapse"
  data-target="#bs-navbar-collapse-1">
    Collapse
</button>

<a href="#" >MyBrand</a>
<!-- Collect the nav links, forms, and other contents for toggling -->
<div  id="bs-navbar-collapse-1">
  <ul >
    <li ><a  href="#">Sports</a></li>
    <li ><a  href="#">Activities</a></li>
    <li ><a  href="#">Contact Us</a></li>
  </ul>
</div>