MOVE Gear Project


#1

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/en/courses/jquery-ext/projects/jquery-prj_move-gear

<In what way does your code behave incorrectly? Include ALL error messages.>
Hello everyone,

Im stuck at this last project. Clicking login box works perfectly but accordion menu doesnt. Here is my code:

index.html: ```

Move Gear

Login

Log in to MOVE

Sign in
 <div class="main">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <div id = "accordion">
          
          <!-- 1 -->
          <h3 class = "ui-accordion-header">FEATURED</h3>
          <div>
              <ul>
                <li>Holiday</li>
                <li>New</li>
                <li>Launch</li>
              </ul>
          </div>
          
          <!-- 2 -->
          <h3 class = "ui-accordion-header">SHOES</h3>
          <div>
            	<ul>
                <li>Basketball</li>
                <li>Football</li>
                <li>Rugby</li>
              </ul>
          </div>
          
          <!-- 3 -->
          <h3 class = "ui-accordion-header">CLOTHING</h3>
          <div>
            	<ul>
                <li>Mens</li>
                <li>Womes</li>
                <li>Kids</li>
              </ul>
          </div>
    
        </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>


<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>

<script src='script.js'></script>
``` style.css : ``` html, body { margin: 0; padding: 0; }

.container {
max-width: 940px;
}

/* Header */
.header {
background-color: #1c1c1c;
font-family: ‘Oswald’, sans-serif;
}

.header h1 {
color: #ffa800;
font-size: 20px;
margin: 0;
padding: 10px 0;
text-transform: uppercase;
}

.header h1 span {
color: #fff;
padding-left: 3px;
}

.header .login {
position: relative;
}

.header .login p {
color: #fff;
font-size: 14px;
margin: 0;
padding: 10px;
text-transform: uppercase;
cursor: pointer;
}

.header .col-md-3, .header .pull-right {
width: 50%; float: left;
}

.header .dropdown-menu {
position: absolute;
top: 40px;
right: 0px;
left: auto;
width: 290px;
border-radius: 0;
padding: 10px;
font-family: Helvetica, Arial, sans-serif;
}

.header .dropdown-menu h3 {
font-family: ‘Oswald’, sans-serif;
font-size: 20px;
margin: 0 0 10px 0;
text-transform: uppercase;

}

.header .dropdown-menu button {
font-family: ‘Oswald’, sans-serif;
text-transform: uppercase;
}

/* Main */
.main {
background: url(https://s3.amazonaws.com/codecademy-content/projects/2/move-gear/bg.jpg) no-repeat center center;
background-size: cover;
height: 600px;
}

#accordion {
background-color: #fff;
border: 1px solid #ddd;
margin-top: 20px;
}

.ui-accordion-header {
background-color: #1c1c1c;
border-top: 1px solid #ddd;
color: #fff;
cursor: pointer;
font-family: ‘Oswald’, sans-serif;
font-size: 18px;
margin: 0;
outline: 0;
padding: 8px 20px;
text-transform: uppercase;
}

.ui-accordion-content {
font-family: Roboto, sans-serif;
font-size: 14px;
padding: 0px 20px;
}

.ui-accordion-content ul {
list-style: none;
padding: 0;
}

.ui-accordion-content li {
padding: 1px 0;
}

/* Supporting */
.supporting {
background-color: #1c1c1c;
}

.supporting h2 {
font-family: ‘Oswald’, sans-serif;
text-transform: uppercase;
text-align: center;
font-size: 24px;
margin-top: 40px;
color: #fff;
}

.supporting p {
font-family: Roboto, sans-serif;
text-align: center;
margin: 8px 0 40px 0;
color: #fff;
}

.feature {
background: url(‘https://s3.amazonaws.com/codecademy-content/projects/2/move-gear/01.jpg’) no-repeat center center;
background-size: cover;
height: 400px;
width: 100%;
}

/* Footer */
.footer {
background-color: #1c1c1c;
font-family: ‘Oswald’, sans-serif;
padding: 40px 0 20px 0;
color: #fff;
}

.footer ul {
padding: 0;
list-style: none;
margin-bottom: 40px;
}

.footer li {
text-transform: uppercase;
}

.footer p {
color: #999;
font-size: 11px;
}

script.js:

var main = function() {
(".login").click(function() { (".login .dropdown-menu").toggle();
});

$("#accordion").accordion();
}

$(document).ready(main);


Thank you
<do not remove the three backticks above>

#2

Hi Saip,

Rather than putting your own <script> tags up in the <head>, you need to put just the one tag given for jQuery UI in between your two existing <script> tags, and it will work.

So, remove your <script> tags inside the <head>, then make the code just before </body> look like this:

  <!-- this is pre-existing, leave it alone: -->
  <script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
  <!-- add this line in: -->
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  <!-- this is pre-existing, leave it alone: -->
  <script src='script.js'></script>
</body>