jQuery accordion UI

Page 1 of 1

4 Replies - 1466 Views - Last Post: 22 July 2010 - 07:54 AM

#1 Guest_Peter*


Reputation:

jQuery accordion UI

Posted 20 July 2010 - 08:22 PM

I need some help, the accordion function isn't working (As you can see in this image. Any ideas on why?
Is This A Good Question/Topic? 0

Replies To: jQuery accordion UI

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3872
  • View blog
  • Posts: 11,405
  • Joined: 18-April 07

Re: jQuery accordion UI

Posted 20 July 2010 - 09:37 PM

Show us the markup you are using and then show us the jQuery you have written for it and perhaps we can help. Also it might help to tell us the actual URL to see it in action and test what is going wrong. We can't do much from a picture.

Thanks. :)
Was This Post Helpful? 0
  • +
  • -

#3 Guest_Peter*


Reputation:

Re: jQuery accordion UI

Posted 20 July 2010 - 10:09 PM

I have this in the header:

<link rel="stylesheet" href="style.css" type="text/css" />
<link type="text/css" href="includes/css/smoothness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="includes/js/jquery.js"></script>
<script type="text/javascript" src="includes/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="includes/js/accordion.js"></script>


then the accordion.js file is:
 $(document).ready(function() {
    $("#accordion").accordion();
  });


and then the accordion in the page:
<div id="accordion">

<p>
<b><h3><a href="#">1. Information-Theoretic CAD System in Mammography:</a></h3></b><div id="1"> <p>bfdfhgdbsdsbdbsfd <a href="#page">Go to top</a></p></div>
<br />
<br />
<b><h3><a href="#">2. Building and Mining Knowledge Databases of Imaging Data in Radiology:</a></h3></b><div id="2"> <p>hfdhfdbdfbdfsbfd <a href="#page">Go to top</a></p></div>
<br />
<br />
<b><h3><a href="#">3. Reliability Analysis of CAD Technology:</a></h3></b><div id="3"><p> fgdfhbfgdfbgdfbgdfbfdgdfgf<a href="#page">Go to top</a></p>
</div>
<br />
<br />
<b><h3><a href="#">4. Advanced Computational Intelligence Techniques for CAD Optimization:</a></h3></b><div id="4"> <p>fgdfhfdbcbddfhgdfgd <a href="#page">Go to top</a></p></div>
<br />
<br />
<b><h3><a href="#">5. Neutron Imaging:</a></h3></b><div id="5"> <p>bwhgsghshghgdshgfhghfdhgdfg <a href="#page">Go to top</a></p></div>
</p>

</div>

Was This Post Helpful? 0

#4 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3872
  • View blog
  • Posts: 11,405
  • Joined: 18-April 07

Re: jQuery accordion UI

Posted 20 July 2010 - 10:43 PM

It is important you understand that the order of elements in the accordion is pretty rigid. For instance, you don't put all the panels inside a <p> tag. Nor should you be inserting <br/> tags between the headings. All formatting has to be inside the <h3> and <div> tags.

<div id="accordion">

<h3><b><a href="#">1. Information-Theoretic CAD System in Mammography:</a></b></h3><div id="1"> <p>bfdfhgdbsdsbdbsfd <a href="#page">Go to top</a></p></div>
<h3><b><a href="#">2. Building and Mining Knowledge Databases of Imaging Data in Radiology:</a></b></h3><div id="2"> <p>hfdhfdbdfbdfsbfd <a href="#page">Go to top</a></p></div>
<h3><b><a href="#">3. Reliability Analysis of CAD Technology:</a></b></h3><div id="3"><p> fgdfhbfgdfbgdfbgdfbfdgdfgf<a href="#page">Go to top</a></p></div>
<h3><b><a href="#">4. Advanced Computational Intelligence Techniques for CAD Optimization:</a></b></h3><div id="4"> <p>fgdfhfdbcbddfhgdfgd <a href="#page">Go to top</a></p></div>
<h3><b><a href="#">5. Neutron Imaging:</a></b></h3><div id="5"> <p>bwhgsghshghgdshgfhghfdhgdfg <a href="#page">Go to top</a></p></div>

</div>


This should give you the correct styling. Notice the location of the <b> tags, absence of the <p> wrapping all the headers and the <br/> tags. :)
Was This Post Helpful? 0
  • +
  • -

#5 Guest_peter*


Reputation:

Re: jQuery accordion UI

Posted 22 July 2010 - 07:54 AM

Thanks much! I got it working :)
Was This Post Helpful? 0
Page 1 of 1