SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Hide and Show texts of paragraph by clicking an image?

    Hi guys

    I know this is very easy.
    But I'm a little rusty with jQuery.

    Let say I have one image and below it are texts (paragraphs).

    Now I want the texts to hide first.
    When the image is clicked the texts will show-up.
    How to do this?

    Thanks in advanced.
    I Love coding...
    Don't click this link.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi,
    Do you want to do this just once, or have the paragraph hide/show every time you click on the image?

  3. #3
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    just once is fine.

    I'm currently experimenting but I have no luck.
    Code:
    		$(document).ready(function(){
    		   $("div #wu_message").hide();
    		 
    		   $("img #westerunion").click(function(){
    		     $("#wu_message").show();
    		   });
    		});
    #wu_message is the ID of a <div> where the texts reside.
    #westerunion is the ID of the image <img>.

    As you can see I'm trying to hide the texts first and will show when the image is clicked.

    But it doesn't work. Why?
    I Love coding...
    Don't click this link.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Just remove the space in your selectors, i.e. div#wu_message and img#westerunion, or just leave out the div and the img altogether.

    Also use $(this) to refer to the clicked element:

    Code JavaScript:
    $(document).ready(function(){
      $("div #wu_message").hide();
     
      $("img #westerunion").click(function(){
        $("#wu_message").show();
      });
    });

  5. #5
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I already tried both,
    Code:
    		$(document).ready(function(){
    		   $("#wu_message").hide();
    		 
    		   $("#westerunion").click(function(){
    		     $("#wu_message").show();
    		   });
    		});
    and

    Code:
    		$(document).ready(function(){
    		   $("div#wu_message").hide();
    		 
    		   $("img#westerunion").click(function(){
    		     $("div#wu_message").show();
    		   });
    		});
    The obvious flaw is, It suppose to hide the texts first.
    But it did not.
    I Love coding...
    Don't click this link.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Can you post your HTML.

  7. #7
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    http://coder9.com/dr/front/payment_page

    thanks in advanced pullo.
    I Love coding...
    Don't click this link.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    You need to put your code after you have included jQuery.
    Put it just before the closing </body> tag and all will be well

  9. #9
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    cool it works by hiding first the texts.
    But when I clicked the western union image it doesn't show the text.

    ?
    I Love coding...
    Don't click this link.

  10. #10
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    911
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Ooop just wrong spelling.

    All works fine now.

    Thanks pullo
    I Love coding...
    Don't click this link.


Bookmarks

Posting Permissions

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