1 Replies - 3063 Views - Last Post: 27 February 2010 - 07:43 PM

#1 Gamegoofs2  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 159
  • Joined: 15-April 09

jQuery UI Accordion

Posted 27 February 2010 - 07:26 PM

Ok this is confusing the heck out of me.

I'm using the jQuery UI for the accordion effect, but it won't work when I link the files nothing happens. I decided to test it on jsbin.com they have an option to using certain extensions so I used that and it worked there, but no where else.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript">
 $("#menu").accordion({ header: "h3" });
</script>

<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Admin</title>
<style type="text/css">
#header {
    background-color: #6699FF;
    height: 100px;
    font-size: xx-large;
    font-weight: bold;
}
#footer {
}
#wrapper {
}
#content {
    width: 800px;
    float: right;
}
#sidebar {
    margin-right: 800px;
}
  </style>
</head>

<body>

<div id="header">
    Admin</div>
<div id="wrapper">
    <div id="content">
        Relevent <br />
        <br />
        <br />
    </div>
    <div id="sidebar">
    <!-- Don't mess with this
    unless you know what you're doing.
    -->
      <div id="menu">
        <h3><a href="#">Section 1</a></h3>
        <div>
        Content goes here <br />
        </div>
        <h3><a href="#">Section 2</a></h3>
        <div>
        More content goes here <br />
        </div>
      </div>
    </div>
</div>
<div id="footer">
</div>

</body>

</html>



Here's the link to the jsbin preview: http://jsbin.com/amuri/2/
If you click the little box in the right hand corner you can view the code.

Is This A Good Question/Topic? 0
  • +

Replies To: jQuery UI Accordion

#2 Gamegoofs2  Icon User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 159
  • Joined: 15-April 09

Re: jQuery UI Accordion

Posted 27 February 2010 - 07:43 PM

Lol, I think I'll answer my own question now. I just went back and looked at it again.
The jQuery function needs to be link this:
$(function() {
  $('selector').accordion({ header: "h3" });
});



Maybe this'll help someone else.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1