How does data-toggle work with html5 and bootstrap?

Question

I'm trying to do a simple dropdown menu on my website but my ide says that the data-toggle attribute is not supported by html5 on the tags. I'm using bootstrap with jquery here are my scripts. Help!

<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/newscarousel.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/newscarousel.css" rel="stylesheet" />
<link href="Content/custom.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" id="about" aria-expanded="true">
                            About
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="about">
                            <li><a href="Home/About.html">About</a></li>
                            <li><a href="Home/Partners.html">Partners</a></li>
                            <li><a href="Home/ToRequestFunding.html">To Request Funding</a></li>
                            <li><a href="Home/Testimonies.html">Testimonies</a></li>
                        </ul>
                    </li>

Is your dropdown working though while the tag is appearing? This might be useful also: https://stackoverflow.com/questions/26642809/how-to-change-microsoft-expression-web-doctype-to-html-5 — vanburen, Aug 21 '15 at 14:35
No. The dropdown does nothing. I first implemented the page on a .cshtml file until i figured out that godaddy doesn't support cshtml yet. so i'm trying to change everything to normal html but with bootstrap and nothing seems to work properly — adev, Aug 21 '15 at 14:48

score 0 · Answer 1 · answered Aug 24 '15 at 20:00

try this

<script src="Scripts/your jquery code here"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/newscarousel.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/newscarousel.css" rel="stylesheet" />
<link href="Content/custom.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" id="about" aria-expanded="true">
                            About
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="about">
                            <li><a href="Home/About.html">About</a></li>
                            <li><a href="Home/Partners.html">Partners</a></li>
                            <li><a href="Home/ToRequestFunding.html">To Request Funding</a></li>
                            <li><a href="Home/Testimonies.html">Testimonies</a></li>
                        </ul>
                    </li>

Main reason: the main reason is that you did not include jquery file in your code...

How does data-toggle work with html5 and bootstrap?

1 Answers1