Adding a slide toggle on Wordpress

Question

I'm trying to create a sliding toggle to show and hide a box that I'm creating but I'm not having success on it, does Wordpress have any required special thing to make it work? here's my code and Jfiddle as well: http://jsfiddle.net/e7fotyqz/

jQuery

$('#toggle-onoff-network').on({
'click': function () {
    var origsrc = $(this).attr('src');
    var src = '';
    if (origsrc == 'img1_on.png') src = 'img2_on.png';
    if (origsrc == 'img2_on.png') src = 'img1_on.png';
    $(this).attr('src', src);
}
});

// The script
$( "#netywork-toggle" ).click(function() {
  $( "#share-stuff" ).slideToggle( "slow", function() {
    // Animation complete.
  });
});

Html

<script src="//code.jquery.com/jquery-1.10.2.js"></script> <!--This is on my theme's header-->

<div id="netywork-toggle"> <!--This is where I want it to appear-->
    <img id ="toggle-onoff-network" src="img1_on.png" width="auto" height="34"/>
</div>
<div id="share-stuff">
    <ul class="crafty-social-buttons-list">
        <li><a href="#" target="_blank"><img title="Pulseframe Code" alt="Facebook" width="38" height="38" src="facebook.png"></a></li>
        <li><a href="#" target="_blank"><img title="Pulseframe Geek" alt="twitter" width="38" height="38" src="facebook.png"></a></li>
        <li><a href="#" target="_blank"><img title="Comming Soon" alt="Comming Soon" width="38" height="38" src="facebook.png"></a></li>
    </ul>
</div>

Answer 1

WordPress has default jQuery. So, no need to load this file explicitly.

JS Code:

jQuery('#toggle-onoff-network').on({
'click': function () {
    var origsrc = jQuery(this).attr('src');
    var src = '';
    if (origsrc == 'img1_on.png') src = 'img2_on.png';
    if (origsrc == 'img2_on.png') src = 'img1_on.png';
    jQuery(this).attr('src', src);
}
});

// The script
jQuery( "#netywork-toggle" ).click(function() {
  jQuery( "#share-stuff" ).slideToggle( "slow", function() {
    // Animation complete.
  });
});

HTML Code: (Removed the jQuery file loading)

<div id="netywork-toggle"> <!--This is where I want it to appear-->
    <img id ="toggle-onoff-network" src="img1_on.png" width="auto" height="34"/>
</div>
<div id="share-stuff">
    <ul class="crafty-social-buttons-list">
        <li><a href="#" target="_blank"><img title="Pulseframe Code" alt="Facebook" width="38" height="38" src="facebook.png"></a></li>
        <li><a href="#" target="_blank"><img title="Pulseframe Geek" alt="twitter" width="38" height="38" src="facebook.png"></a></li>
        <li><a href="#" target="_blank"><img title="Comming Soon" alt="Comming Soon" width="38" height="38" src="facebook.png"></a></li>
    </ul>
</div>