Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Icons to show/hide a div

    Hello!
    Not sure if I should post this in one of the other sub-forums, I apologize in advance if so.

    I am having an icon which function is to show/hide a div. It works fine, but I do want the icon to change to a different icon when clicked, so it is one icon to show the div, and a different icon to hide the div.

    Here is the code:

    Code:
     function hide_menu(id){
        document.getElementById(id).style.display = "none";
    }
    function show_menu(id){
        document.getElementById(id).style.display = "block";
    }
    and the html:
    Code:
    <div id="infotekst">
    <input type="image" src="info_kvit3.png" width="35" height="35" 
    onclick="if (document.getElementById('idOfDiv').style.display=='none') 
    show_menu('idOfDiv'); else hide_menu('idOfDiv');"></button>
    </div>
    Thanks,
    Saphigon

  • #2
    Regular Coder
    Join Date
    Mar 2011
    Posts
    148
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Hi,
    Try change your code with this one:
    Code:
    <div id="infotekst">
    <input type="image" src="info_kvit3.png" width="35" height="35" 
    onclick="if(document.getElementById('idOfDiv').style.display=='none') { this.src='other_img.png';
    show_menu('idOfDiv'); } else { this.src='info_kvit3.png'; hide_menu('idOfDiv'); }"></button>
    </div>
    - Replace "other_img.png" with the path of your image.
    Last edited by MarPlo; 04-14-2012 at 04:06 PM.

  • Users who have thanked MarPlo for this post:

    Saphigon (04-14-2012)

  • #3
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for reply, it works almost perfectly.
    The issue is that the icon does not change at first click, but at the second.
    It is the wrong icon that appears to begin with; the one to show the div, even though the div is shown to start with.
    I guess that is the reason, but I do not really know how to fix it. Also, I would like the div to start out hidden.


    Thanks!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •