SashayAway SashayAway - 1 month ago 13
HTML Question

Bootstrap "Panel-collapse" "collapse" do not work online

I would like to know why my classes "panel-collapse" "collapse" are not working.

I have just uploaded the files on my server and when I click the link area, they do not work (They do not drop the hidden content down). However, they work perfectly on my Dreamweaver preview (In addition in the example code I have pasted below).

If you want to check the online version please check out to this link https://www.carloanfinder.co.uk/CLF30-WEB/CLF3_0_web-ONLY-FORM-v3.html and you can see as they do not work when you click the clickable area, for example the green area.

If someone want to check the code. Please find it below a small example what I am using. (It works here as well)



<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="Keywords" content="">
<meta name="robots" content="index,follow">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>


<a data-toggle="collapse" data-parent="#accordion" href="#FAQ5"> <div class="col-md-12 form-clf-green-bar-bg">
<!--F-2-header--> <p style="background-color: red"> CLICK ME </p>
</div> </a>

<!--F-2-form-->
<div id="FAQ5" class="panel-collapse collapse">
<!--contact us grey--> <br class="cB" /><div class="container-fluid">
<div class="row form-bg-grey">
<!--text--> <div class="col-md-12"> <h4>TEST HELLO!</h4>
</div>
</div>
</div>
</div>


<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="JS-CLF30.js"></script>


</body>
</html>





Finally, please find blow an image what it should drop down (a form) when you click the green area (button)

enter image description here

If someone could tell me where is the error/bug, that would be amazing. Because I cannot understand where is the error. I have checked it on Chrome and Firefox.

Thank you very much

Answer

I think the code is right, but there is a problem loading http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

When using the inspector with the link you provided it says that file is not being loaded because of "mixed content": https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

Can you try to upload the bootstrap.min.js directly to your server and link the local version?

Good luck! :)

Comments