CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
user5638822
user5638822

Reputation:

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

Upvotes: 0

Views: 532

Answers (2)

Sean Sobey
Sean Sobey

Reputation: 972

You are loading bootstrap.min from an http source on an https site and the browser is blocking the file due to mixed content.

(See screenshot here)

Switch to an https CDN link (or locally host the file) to solve your issue.

Upvotes: 1

sagilcas
sagilcas

Reputation: 26

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! :)

Upvotes: 1

Related Questions