www.webdeveloper.com
Results 1 to 2 of 2

Thread: jQuery's accordion won't work

  1. #1
    Join Date
    May 2013
    Posts
    5

    jQuery's accordion won't work

    Can anybody spot the problem?

    HTML Code:
    <!DOCTYPE html>
    <html>
        <head>
    		<title></title>
            <link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script type='text/javascript'>
    		$(document).ready(function() {
        $('#menu').accordion();
    })</script>
    
    	</head>
    	<body>
            <div id="menu">
                <h3>Section 1</h3>
                <div>
                    <p>I'm the first section!</p>
                </div>
                <!--Add two more sections below!-->
                <h3>Awesome Stuff</h3>
                <div>
                    <p>I'm awesome!</p>
                </div>          
                <h3>Sucky Stuff</h3>
                <div>
                    <p>I'm not awesome!</p>
                </div>            
            </div>
    	</body>
    </html>

  2. #2
    Join Date
    Dec 2012
    Posts
    54
    Hi,

    I got your code to work by adding the jQuery UI item which it seemed you weren't loading.
    Add this line of code:

    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    and you should be working properly. My full working example was:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title></title>
        <link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'>
        <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
        <script type='text/javascript'>
          $(document).ready(function() {
            $('#menu').accordion();
          })
        </script>
      </head>
      <body>
        <div id="menu">
          <h3>Section 1</h3>
          <div>
           <p>I'm the first section!</p>
          </div>
          <!--Add two more sections below!-->
          <h3>Awesome Stuff</h3>
          <div>
            <p>I'm awesome!</p>
          </div>          
          <h3>Sucky Stuff</h3>
          <div>
            <p>I'm not awesome!</p>
          </div>            
        </div>
      </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles