HTML, Bootstrap, accordion, trouble shoot
The following is supposed to display the header lines keeping its sub-items collapsed. And, when the top-line is clicked on it is supposed to drop down to display its sub-items. The problem is that the following html file displays all items in expanded mode. So, it fails to acct like accordion control (expand/ collapse).
Question: How can this be fixed?
The attached image are not mandatory to include.
Question: How can this be fixed?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My EE Certifications</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
#accordion {
width:50%;
height: 50px;
line-height: 50px;
vertical-align: middle;
}
img {
float:left;
}
</style>
<script>
$(function() {
$( "#accordion" ).accordion({
heightStyle: "content",collapsible: true
});
$("#foo").click();
});
</script>
</head>
<body>
<div id="accordion">
<h3 id="foo"><img src="images/genius.png" alt="" />Genius1,000,000</h3>
<div>
<ul>
<li>Microsoft Access Database</li>
</ul>
</div>
<h3><img src="images/sage.png" alt="" />Sage500,000</h3>
<div>
<p>
Microsoft Access Database
</p>
</div>
<h3 id="bar"><img src="images/wizard.png" alt="" />Wizard300,000 </h3>
<div>
<ul>
<li>Microsoft Access Database</li>
</ul>
</div>
<h3><img src="images/guru.png" alt="" />Guru150,000</h3>
<div>
<ul>
<li>Microsoft Access Database</li>
<li>Access Forms</li>
<li>Access Coding/Macros</li>
</ul>
</div>
<h3><img src="images/master.png" alt="" />Master50,000 </h3>
<div>
<ul>
<li>Microsoft Access Database</li>
<li>Access Forms</li>
<li>Access Coding/Macros</li>
<li>SQL Query Syntax</li>
<li>Access Reports</li>
<li>.NET</li>
<li>C# Programming Language</li>
<li>MS SQL Server</li>
<li>Programming for ASP.NET</li>
</ul>
</div>
</div>
</body>
</html>The attached image are not mandatory to include.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Now I see the js files. So, what can I do about this?
ASKER
I changed:
<script src="//code.jquery.com/jqu
to
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Now it is working.
Could you explain when https: is required and when it is not?
<script src="//code.jquery.com/jqu
to
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Now it is working.
Could you explain when https: is required and when it is not?
<script src="//code.jquery.com/jqu
this should work properly. the browser automatically uses http on ordinary pages, and https on secure pages.
I'm not too sure why this happens for you while it's working for me. may be you are using an old browser.
this should work properly. the browser automatically uses http on ordinary pages, and https on secure pages.
I'm not too sure why this happens for you while it's working for me. may be you are using an old browser.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I have only this html file + the image files. The images show alright meaning the get loaded.
Mike