CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Alb
Alb

Reputation: 221

jQuery Toggle Confusion

Been a while since I've touched any jQuery, and I was a laughable idiot in my "prime". I'm hoping to have a footer nav pop out when a certain icon is clicked. I've tried the js in an external file, and now in my html file just to make sure my code is wrong. I have jQuery included like so: 

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
    <!-- <script src="js/main.js"></script>-->

</head>
<body>

part one of the html in question, the image with the id of "add" is what will be clicked to toggle: 

<section id="side">
        <nav class="sidebar"><img class="logo" src="images/logo.png"></img>
            <ul>
                <li> <a href="#"> About </a></li>
                <li> <a href="docs.html"> Providers </a></li>
                <li> <a href="#"> Quality </a> </li>
                <li> <a href="#"> Contact </a> </li>
            </ul>
            <img id="add" src="images/phoner.png"></img>
        </nav>
    </side>

and here is both what I'd like to popout on click of the aforementioned image, and the jQuery:

<footer id="footer">
                          <ul>
                             <li> <h2> Joint Replacements </h2></li>
                             <li> <h2>Sports Medicine </h2></li>
                             <li> <h2>Orthopedic Trauma & Fractures </h2></li>
                          </ul>
                     </footer>

        </section>
        <script>
        $( "#add" ).click(function() {
            $( "#footer" ).toggle( "slow" );
        });
        </script>

Thanks to any and all for any input.

Edit- this in my console: 

[Error] Failed to load resource: The requested URL was not found on this server. (jquery.min.js, line 0)
[Error] ReferenceError: Can't find variable: $
    global code (mmp.html, line 74)
[Error] Failed to load resource: The requested URL was not found on this server. (jquery-1.10.2.min.js, line 0)

Upvotes: 0

Views: 71

Answers (1)

Said Kholov
Said Kholov

Reputation: 2486

Works fine in the fiddle: 

<nav class="sidebar">
      <img class="logo" src="images/logo.png"/>
      <ul>
          <li> <a href="#"> About </a></li>
          <li> <a href="docs.html"> Providers </a></li>
          <li> <a href="#"> Quality </a> </li>
          <li> <a href="#"> Contact </a> </li>
      </ul>
    <img id="add" src="images/phoner.png" />
</nav>


<footer id="footer">
    <ul>
        <li> <h2> Joint Replacements </h2></li>
        <li> <h2>Sports Medicine </h2></li>
        <li> <h2>Orthopedic Trauma & Fractures </h2></li>
    </ul>
</footer>

JS:

 $( "#add" ).click(function() {
     $( "#footer" ).toggle( "slow" );
 });
  1. Check if jQuery is loaded
  2. Check for any console errors
  3. Check if your script is being executed

Upvotes: 1

Related Questions