0

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>

1 Answer 1

2

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>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.