CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Zohaib Imtiaz
Zohaib Imtiaz

Reputation: 429

Data-toggle and data-target not working Bootstrap 3

I am using Bootstrap 3.4.1 and collapse is not working. I am using PHPStorm and it is not recognizing data-toggle and data-target. Although no typo on them.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width , initial-scale=1" />
    <title>TESTING</title>

    <script src="../js/bootstrap.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">


</head>

<body>
<div class="navbar navbar-default">
    <div class="navbar-header">
        <button class="btn btn-success navbar-toggle collapsed"
                data-toggle="collapse" data-target=".navbar-collapse">
            <span class="glyphicon glyphicon-chevron-down"></span>
        </button>
    </div>
    <div id="MINE" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="nav"> <a href="Home.html">Home</a> </li>
            <li class="nav"> <a href="About.html">About</a></li>
            <li class="nav"> <a href="Books.html">Books</a></li>
            <li class="nav"> <a href="Films.html">Films</a></li>
            <li class="nav"> <a href="Contact.html">Contact</a></li>
        </ul>
    </div>
</div>

</body>
</html>

IDE View

the button should be able to show and collapse class navbar-collapse. but is not responding.

before Clicking the button NotClicked

After Clicking enter image description here

This is the Navigation bar enter image description here

Upvotes: 0

Views: 3466

Answers (1)

Asif Iqbal
Asif Iqbal

Reputation: 46

Working code Demo

Just went through your question. I've found a few unconventional things in your code that put me into unease. Mentioning them below. First point will solve your issue while others are hopefully for your knowledge.

  • Bootstrap needs jquery to be loaded first to perform almost all of it's dynamic activities (in your case it's triggering a toogle event).

  • It is a good practice to load css files in header and javascripts down in the body (usually before closing tag of body) untill and unless specific purpose is required. It makes your page loading into client's browser faster.

  • I noticed you're linking two js files. "bootstrap.js" and "bootstrap.min.js". Both files have same javascript code but later one is just minified version. So just include one of them.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width , initial-scale=1" />
    <title>TESTING</title>


   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" />


</head>

<body>
<div class="navbar navbar-inverse">
    <div class="navbar-header">
        <button class="btn btn-success navbar-toggle collapsed"
                data-toggle="collapse" data-target="#MINE">
            <span class="glyphicon glyphicon-chevron-down"></span>
        </button>
    </div>
    <div id="MINE" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="nav"> <a href="Home.html">Home</a> </li>
            <li class="nav"> <a href="About.html">About</a></li>
            <li class="nav"> <a href="Books.html">Books</a></li>
            <li class="nav"> <a href="Films.html">Films</a></li>
            <li class="nav"> <a href="Contact.html">Contact</a></li>
        </ul>
    </div>
</div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>

</body>
</html>

Upvotes: 2

Related Questions