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
    936
    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.
    Quality codes are optimized and tested...
    Click here for inspiration..

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 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
    936
    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?
    Quality codes are optimized and tested...
    Click here for inspiration..

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 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
    936
    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.
    Quality codes are optimized and tested...
    Click here for inspiration..

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

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

    thanks in advanced pullo.
    Quality codes are optimized and tested...
    Click here for inspiration..

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 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
    936
    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.

    ?
    Quality codes are optimized and tested...
    Click here for inspiration..

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

    All works fine now.

    Thanks pullo
    Quality codes are optimized and tested...
    Click here for inspiration..


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
  •