Probem displaying accordion
Hello,
I'm new to web programming and am trying to get an accordion up and running. Everything seems to work great however when I apply a theme the accordion is not displaying like I'd hope.
After applying UI Lightness the Accordion headers appear on a separate line below the triangle icon that indicates the expanded pane (like below):
->
Change location
If I go to the jQuery site and view the UI Lightness theme the triangle icon appears inline with the text (like below). This is what I want.:
-> Change Location
Boilerplate code is below ... any thoughts much appreciated.
Jess
<html>
<head>
<link rel="stylesheet" href="css/jquery-ui-1.8.1.custom.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script text="text/javascript">
$(document).ready(function() {
$("#accordion").accordion()
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="accordion">
<h3><a href="#">Find Location</a></h3>
<div>
<p>
Lets you search by plat or address.
</p>
</div>
<h3><a href="#">Change Map</a></h3>
<div>
<p>
Add or remove data. Change look of pipe.
</p>
</div>
</div>
</body>
</html>
<head>
<link rel="stylesheet" href="css/jquery-ui-1.8.1.custom.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script text="text/javascript">
$(document).ready(function() {
$("#accordion").accordion()
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="accordion">
<h3><a href="#">Find Location</a></h3>
<div>
<p>
Lets you search by plat or address.
</p>
</div>
<h3><a href="#">Change Map</a></h3>
<div>
<p>
Add or remove data. Change look of pipe.
</p>
</div>
</div>
</body>
</html>
Topic Participants
jborky
Richard Worth