Solved: 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.