SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery - combine code into a common function

    Hi,

    Now I know this should be very simple .... but for the life of me I can't think how to do it.

    Here's the problem ... I've got text two elements on a page that, when clicked, toggle separate content so that it either shows or hides it. When these items are clicked, I want to check the vale if the text and, if it's 'Show' then I want to change it to 'Hide' and vice versa.

    I've got some Jquery code that's working but, I seem to have written the same code twice - once for each function.

    anyone tell me how to combine the common code into one simple function that will change the 'clicked' text to wither 'show' or 'hide'

    Code:
    $(document).ready(function() 
    { 
    	
    	$('.show').click(function()
    		{
    			var target = 'comments-'+$(this).attr("id");
    			var text=$(this).text();
    			var n=text.indexOf("show"); 
    			$('#' + target).slideToggle('slow');
    			if (n > -1)
    				{
    					newtext=text.replace("show","hide");
    				}
    			else	
    				{
    					newtext=text.replace("hide","show"); 
    				}
    			$(this).text(newtext);	
    		});
    		
    
    
    	$('.showpost').click(function()
    		{
    			var thisid = $(this).attr("id");
    			var splitx=thisid.split("-");
    			var target='content-'+splitx[1];
    			var text=$(this).text();
    			var n=text.indexOf("show"); 
    			$('#' + target).slideToggle('slow');
    			if (n > -1)
    				{
    					newtext=text.replace("show","hide");
    				}
    			else	
    				{
    					newtext=text.replace("hide","show"); 
    				}
    			$(this).text(newtext);
    		});
    
    
    });

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    You could do something like this:

    Code JavaScript:
    function toggleText(text){
      return (text == "show")? "hide" : "show"
    }

    Then:

    Code JavaScript:
    $('.show').click(function() 
      var target = 'comments-'+$(this).attr("id");
      var buttonText = $(this).text();
      $('#' + target).slideToggle('slow');
      $(this).text(toggleText(buttonText));	
    });

    I changed the variable "text" to "buttonText" (or whatever), so as to not confuse it with the method text()
    Also, I didn't test this code, so if it doesn't work as expected, just let me know and I'll have a closer look.

    HTH

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    You could do something like this:

    Code JavaScript:
    function toggleText(text){
      return (text == "show")? "hide" : "show"
    }

    Then:

    Code JavaScript:
    $('.show').click(function() 
      var target = 'comments-'+$(this).attr("id");
      var buttonText = $(this).text();
      $('#' + target).slideToggle('slow');
      $(this).text(toggleText(buttonText));	
    });

    I changed the variable "text" to "buttonText" (or whatever), so as to not confuse it with the method text()
    Also, I didn't test this code, so if it doesn't work as expected, just let me know and I'll have a closer look.

    HTH
    That idea worked perfectly - thanks!

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Cool!
    Thanks for taking the time to follow up!


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
  •