CODEWITHSUNDEEP
javascriptjquery
BentCoder
BentCoder

Reputation: 12750

Showing and hiding image after clicking event

I'm trying to hide language_arrow_bottom after clicking and show language_arrow_up and afterwards the other way around.

I cannot find the error in my code below? I know toggle in jquery but I don't want to use it for now.

Thanks in advance

I'm loading http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js

HTML

<a id="language_arrow_bottom" href="#nogo" title="Other languages‎"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>
<a id="language_arrow_up" href="#nogo" title="Close‎"  style="display:none;"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>

JS

$(document).ready(function ()
{
    $('#language_arrow_bottom').click(function(event)
    {
        $('#language_arrow_bottom').hide();
        $('#language_arrow_up').show();
    });

    $('#language_arrow_up').click(function(event)
    {
        $('#language_arrow_up').hide();
        $('#language_arrow_bottom').show();
    });
});

Upvotes: 2

Views: 1629

Answers (7)

rohitcopyright
rohitcopyright

Reputation: 342

This is because you have hide the image on load...you should use display none in 'a' tag not in 'img'

Upvotes: 0

Surama Hotta
Surama Hotta

Reputation: 130

Change the code to set display "None" for "a" instead of the img as the image is inside the a tag and you are showing and hiding based on the "a" id.

<a id="language_arrow_bottom" href="#nogo" title="Other languages">
  <img src="web/images/bottom_arrow.jpg"  width="13px" height="13px" alt=""/>
<a id="language_arrow_up" href="#nogo" title="Close" `style="display:none;"`>
  <img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" />

The same js code will work here after the above changes.

$(document).ready(function ()
{
    $('#language_arrow_bottom').click(function(event)
    {
        $('#language_arrow_bottom').hide();
        $('#language_arrow_up').show();
    });

    $('#language_arrow_up').click(function(event)
    {
        $('#language_arrow_up').hide();
        $('#language_arrow_bottom').show();
    });
});

Upvotes: 0

Joris Lindhout
Joris Lindhout

Reputation: 205

Another fiddle:

http://jsfiddle.net/8A8LS/1/

<a id="language_arrow_bottom"><img src="http://www.iconshock.com/img_jpg/REALVISTA/3d_graphics/jpg/128/arrow_icon.jpg" width="13px" height="13px" alt="" /></a>

<a id="language_arrow_up"><img src="http://petacross.com/images/bwd_arrow.gif" width="13px" height="13px" alt="" style="display:none;" /></a>

$('a').click(function () {
  $('a img').show();
  $(this).find('img').hide();
});

Upvotes: 0

mspaly
mspaly

Reputation: 96

Agree with Arun above. Also, this code may be working, but you are using the same image, "web/images/bottom_arrow.jpg", so visually it may look like it's not working. Try using separate content within the tag (or view the web inspector) to validate whether the code is working or not.

Upvotes: 0

Umang Mehta
Umang Mehta

Reputation: 1507

Check this Fiddle

Just make a with the id and do the same procedure you tried with the tag 

<div id="language_arrow_bottom">
    <a href="#nogo" title="Other languages"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>
</div>

<div id="language_arrow_up" style="display:none;">
    <a  href="#nogo" title="Close"><img src="web/images/up_arrow.jpg" width="13px" height="13px" alt=""/></a>
</div>

Upvotes: 0

xisalreadytaken
xisalreadytaken

Reputation: 21

I don't know but I think you probably need to add return false; calls at the end of your functions. Other code looks good

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388436

You need to hide the language_arrow_up element by default, not the image inside it

<a id="language_arrow_up" href="#nogo" title="Close" style="display:none;"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>

Demo: Fiddle

Upvotes: 4

Related Questions