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?
<!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>

Open in new window

\
The attached image are not mandatory to include.
LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Habib PourfardSoftware DeveloperCommented:
the following html file displays all items in expanded mode
When I ran the Html page all items are in the collapsed mode. may be your js files are not loaded!
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
What other files?

I have only this html file + the image files. The images show alright meaning the get loaded.

Mike
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Now I see the js files. So, what can I do about this?
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Mike EghtebasDatabase and Application DeveloperAuthor Commented:
I changed:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
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?
0
Habib PourfardSoftware DeveloperCommented:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
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.
0
Jeff DarlingDeveloper AnalystCommented:
some changes

option to start all collapsed.
images set to transparent

sample

images
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.