CODEWITHSUNDEEP
jqueryimagetoggle
Luis M
Luis M

Reputation: 104

Toggle Button and Image Switch

This is the code I have

JQUERY

//Hide/Show Audio Player
$(document).ready(function()
{
var $button = $("#hs-nav");
var $navbar = $("#nav-column");

$navbar.animate();
$button.toggle(
    function()
    {
        $("#nav-column").hide();
        document.getElementById("screen-column").style.left = "0"; 
    },
    function()
    {
        $("#nav-column").show();
        document.getElementById("screen-column").style.left = "";
    });
});

This is my HTML

<div id="hs-nav">
    <a href="#" ><img src="images/left-arrow.png" width="20" height="20" alt=""></a>
</div>

I would like the toggle button to switch between left-arrow and right-arrow when clicked, appropriately. I looked everywhere, any help would be appreciated!

I TRIED this but it doesn't work

$(document).ready(function()
{
var $button = $("#hs-nav");
var $navbar = $("#nav-column");

$navbar.animate();
$button.toggle(
    function()
    {
        $("#nav-column").hide();
        document.getElementById("screen-column").style.left = "0"; 
        document.getElementById("hs-nav").addClass("right-arrow");
    },
    function()
    {
        $("#nav-column").show();
        document.getElementById("screen-column").style.left = "";
        document.getElementById("hs-nav").removeClass("right-arrow");
    });
});

Upvotes: 1

Views: 817

Answers (2)

Luis M
Luis M

Reputation: 104

Got the solution

//Hide/Show Audio Player
$(document).ready(function()
{
var $button = $("#hs-nav");
var $navbar = $("#nav-column");

$navbar.animate();
$button.toggle(
    function()
    {
        $("#nav-column").hide();
        document.getElementById("screen-column").style.left = "0"; 
        $("#hs-nav").addClass("right-arrow");
    },
    function()
    {
        $("#nav-column").show();
        document.getElementById("screen-column").style.left = "";
        $("#hs-nav").removeClass("right-arrow");
    });
});

Upvotes: 0

adeneo
adeneo

Reputation: 318182

I have no idea what the left positioning is doing, but if you're trying to swap the left-arrow image with a right-arrow image when clicking the button, it should probably look something like this :

$(document).ready(function() {
    $("#hs-nav").on('click', function() {
        $(this).find('img').prop('src', function(_,source) {
            return source.indexOf('left-arrow') != -1 ? 
                   source.replace('left-arrow', 'right-arrow'): 
                   source.replace('right-arrow', 'left-arrow');
        });
    });
    $("#nav-column").toggle();
});

Upvotes: 2

Related Questions