Can't get accordion menu to work


#1

https://www.codecademy.com/en/courses/jquery-ext/projects/jquery-prj_move-gear?link_content_target=interstitial_project

My divs are just showing up as links and not working as accordion menus, not sure how to fix it.

$(document).ready(function(){
  $('.login').click(function(){
    $('.login>.dropdown-menu').toggle();
  });
  $('h3').click(function(){
    $('#accordion>div').accordion();
  });
});

HTML:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
    <link href='style.css' rel='stylesheet'>
        <script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script src='script.js'></script>
  </head>
  <body>
    <div class="header">
      <div class="container">
        <div class="row">
          <div class="col-md-3">
            <h1>Move <span>Gear</span></h1>
          </div>
          <div class="pull-right">
            <div class="login">
              <p>Login</p>
              <div class="dropdown-menu">
                <h3>Log in to MOVE</h3>
                <form role="form">
                  <div class="form-group">
                    <input type="email" class="form-control" id="email" placeholder="Email">
                  </div>
                  <div class="form-group">
                    <input type="password" class="form-control" id="password" placeholder="Password">
                  </div>
                  <button type="submit" class="btn">Sign in</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="container">
        <div class="row">
          <div class="col-md-3" id="accordion">
            <h3>
              Featured
            </h3>
            <div>
               <ul>
              <li>Holiday Gift Guide</li>
              <li>New Releases</li>
              <li>Launch Calendar</li>
            </ul>
            </div>
           <h3>
             Shoes
            </h3>
            <div>
              <ul>
                <li>Basketball</li>
                <li>Football</li>
                <li>Training</li>
              </ul>
            </div>
                      
          </div>
        </div>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        <h2>Better. Faster. Stronger. You</h2>
        <p>A wide range of sporting gear especially designed to maximize your performance.</p>
      </div>
    </div>

    <div class="feature">
    </div>

    <div class="footer">
      <div class="container">
        <ul>
          <li>Gift Cards</li>
          <li>Find a city</li>
          <li>Become a member</li>
          <li>Contact us</li>
        </ul>
        <p>&copy; MOVE</p>
      </div>
    </div>



  </body>
</html>

#2

@kelfin373

Have a read through
http://stackoverflow.com/questions/19014013/how-to-make-a-dropdown-menu-with-jquery

http://v4-alpha.getbootstrap.com/components/dropdowns/


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.