• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 441
  • Last Modified:

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.
0
Mike Eghtebas
Asked:
Mike Eghtebas
  • 3
  • 2
2 Solutions
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now