Home/ Questions/Q 8662889
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T16:50:39+00:00

I am using an accordion for the first time, but for some reason it

  • 0

I am using an accordion for the first time, but for some reason it doesn’t display correctly. The icon is behind the text and there is no padding on the left.

a minimal example looks like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title>test</title>

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link type="text/css" href="css/cupertino/jquery-ui-1.8.24.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/vendor/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#accordion").accordion({ header: "h3", active: false, collapsible: true, fillSpace: true });
        });
    </script>
</head>
<body>
    <!-- Add your site or application content here -->
    <div id="accordion">
        <div>
            <h3>test</h3>
            <div>bla bla bla</div>
        </div>
    </div>

</body>
</html>

a screenshot of how it looks for me can be viewed here

Does anyone know how to solve it?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your markup needs a few tweaks:

    <div id="accordion">
    <h3><a href="#">test</a></h3>
    <div>bla bla bla</div>
</div>​

    Example: http://jsfiddle.net/andrewwhitaker/WP29E/15/

    • 0