CODEWITHSUNDEEP
jquery
user5096599
user5096599

Reputation:

jquery slidetoggle not working - not getting any errors

I am attempting to use jquery to slideToggle an image I have in the footer tag on my page. I don't get any errors, it shows jquery is a source, but nothing happens. Here is the relevant html code:

<button type="submit" class="btn btn-default" id="hidePic">Submit</button>
          </div>
        </div>
      </div>
    </form>
    <div class="row">
      <div class="col-md-12 padding-top-10em">
        <ul class="no-bullets font-style">
          <li class="flow-left col-md-2 col-md-offset-3 col-xs-12">Find Chats</li>
          <li class="flow-left col-md-2 col-xs-12">Rate Chats</li>
          <li class="flow-left col-md-2 col-xs-12">Become a Bubsta<span class="enlargeText">R</span>!</li>
        </ul>
      </div>
    </div>
    <footer><img id="pic" src="chat.jpg"></footer>
  </div>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script src="index.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

and here is the js code:

$( "#hidePic" ).click(function() {
    $( "#pic" ).slideToggle( "slow", function() {
        // Animation complete.
    });
});

Upvotes: 0

Views: 36

Answers (1)

Mark
Mark

Reputation: 4873

Try using prevent default on your submit button...and like others said, wrap in a doc ready function (see code below).

Something like this:

<script>
$(function(){
  $( "#hidePic" ).click(function(e) {
      e.preventDefault();
      $( "#pic" ).slideToggle( "slow", function() {
          // Animation complete.
      });
  });
});
</script>

Upvotes: 0

Related Questions