Django Heroku - Dropdown not working in bootstrap

Question

I made a Django project and a page has side menu, whenever the side menu is selected a dropdown appears. This is happening when I run it locally, whereas its not working from heroku. The dropdown code is as follows:

<li class="panel panel-default" id="dropdown">
            <a data-toggle="collapse" href="#dropdown-lvl4">
                <span class="glyphicon glyphicon-menu-down"></span> Day 4 <span class="caret"></span>
            </a>

            <!-- Dropdown level 1 -->
            <div id="dropdown-lvl4" class="panel-collapse collapse">
                <div class="panel-body">
                    <ul class="nav navbar-nav">
                        <li><a href="/python_course/day4/reg_expressions">Regular Expressions</a></li>
                        <li><a href="/python_course/day4/data_scraping">Data Scraping</a></li>


                    </ul>
                </div>
            </div>
        </li>

The website link is here . Kindly help me with this. I an new to heroku and Django.

Answer 1

You are trying to load an unencrypted ( http ) resource from a secure ( https ) page. You will notice that if you check your page using http it will work.

Change the following line

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

to

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Note the lack of protocol string ( http: ) in the URL.