• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5039
  • Last Modified:

Show / Hide JQuery Script (Provided, working Example) Add Image instead of Text

Hello All;
The following code is great, however, I would love to make it better, by the use of Images.
have a
[+] <= Show
[-] <= Hide

Could someone please help me out with this one?
I tried just changing the text
$(this).html('hide');  
$(this).html('-');  

Of which worked, however, it did not change the text on the link, it stayed as a Minus even when I needed it to show a [Plus] +

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){  
  $('.ahref',this).toggle(
    function () {
      var id = $(this).attr('href');
      if($('.box'+id).text() == '') {  
       $(".box"+item.id).html(html).slideUp(1000); 
        $(this).html("hide");
      } else { 
        $(this).html('hide');  
        $('.box'+id).slideUp(1000);  
      }  
    },  
    function () {  
      var id = $(this).attr('href');
      $(this).html('show');  
      $('.box'+id).slideDown(1000);  
    }  
  );
});
</script>
</head>

<body>
<a href="1" class="ahref">show 1</a>
<a href="2" class="ahref">show 2</a>
<a href="3" class="ahref">show 3</a>
<div class="box1">1</div> 
<div class="box2">2</div> 
<div class="box3">3</div>
<div style="clear:left"></div>
</body>
</html>
                                  

Open in new window


Thank You
Carrzkiss
0
Wayne Barron
Asked:
Wayne Barron
  • 6
  • 5
  • 2
  • +1
1 Solution
 
Chris StanyonCommented:
If you just want to use images instead of text, consider using the toggleClass function. For example:

$(this).toggleClass('showing');

Each time you click, it will toggle the 'showing' class on and off. You could then assign background images accordingly.
0
 
KhiluCommented:
i have updated your code.

http://jsfiddle.net/b48dR/1/

CSS:
    .minus
        {
            background-image:url("http://lplaces.com/images/minus.png");
            height: 32px;
            width: 32px;
    background-repeat:no-repeat;
        }
        
         .plus
        {
            background-image:url("http://lplaces.com/images/plus.png");
            height: 32px;
            width: 32px;
    background-repeat:no-repeat;
        }

Open in new window


JS:
$(document).ready(function(){  
  $('.ahref',this).toggle(
    function () {
      var id = $(this).attr('href');
      if($('.box'+id).text() == '') {  
       $(".box"+item.id).html(html).slideUp(1000); 
        $(this).children().addClass("plus").removeClass("minus");
      } else { 
        $(this).children().addClass("plus").removeClass("minus");
        $('.box'+id).slideUp(1000);  
      }  
    },  
    function () {  
      var id = $(this).attr('href');
      $(this).children().addClass("minus").removeClass("plus");
      $('.box'+id).slideDown(1000);  
    }  
  );
});

Open in new window


HTML:

<a href="1" class="ahref "><div class="minus"></div></a>
<a href="2" class="ahref"><div class="minus"></div></a>
<a href="3" class="ahref"><div class="minus"></div></a>
<div class="box1">1</div> 
<div class="box2">2</div> 
<div class="box3">3</div>
<div style="clear:left"></div>

Open in new window

0
 
Chris StanyonCommented:
That's a lot of code! Have a look at the following fiddle:

http://jsfiddle.net/ChrisStanyon/qPy95/

FYI - The way you're currently using toggle() with 2 functions is now deprecated (as of jQuery 1.8), so if you update your jQuery library your code won't work at all.
0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
headshockCommented:
Hey,
Try this solution below, it is a-bit tidier. This can be viewed here for a working version of the action.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){  
  $(".ahref").click(function(e){
      e.preventDefault();
      var id = $(this).attr('href');
      $('.box'+id).slideToggle(1000);
  }).toggle(
  function(){
    $(this).text( 'show' + id);
  },
  function(){
    $(this).text( 'hide' );
  });
 
});
</script>
</head>

<body>
<a href="1" class="ahref">hide 1</a>
<a href="2" class="ahref">hide 2</a>
<a href="3" class="ahref">hide 3</a>
<div class="box1">1</div> 
<div class="box2">2</div> 
<div class="box3">3</div>
<div style="clear:left"></div>
</body>
</html>
        

Open in new window

0
 
Chris StanyonCommented:
@headshock - doesn't work - id is undefined!

id is defined in the click() scope so isn't available to the toggle() function
0
 
headshockCommented:
Mmmm updated it to remove toggle() due to its usage change in 1.9,
http://jsbin.com/ezagol/2/edit
Works fine in jsbin on click of a rels.
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
http://jsfiddle.net/, cannot get the pages to load, their servers might be having problems right now, will check back with them a little later on.
So am unable to view your codes guys.

@headshock
I wanted "Images" in place of the "text"
This you did not include in your code.
0
 
Chris StanyonCommented:
Yeah. Looks like jsfiddle is down. Here's the code from my jsfiddle:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){  
	$('.ahref').click(function() {
		$(this).toggleClass('hidden'); //change the status of the link
		$($(this).data('div')).slideToggle(500); //toggle the visibility
	});
});
</script>

<style type="text/css">
	.ahref { background: url(http://cdn1.iconfinder.com/data/icons/diagona/icon/16/130.png) no-repeat left top; width: 16px; height: 16px; display:inline-block; cursor:pointer; }
	.hidden { background: url(http://cdn1.iconfinder.com/data/icons/diagona/icon/16/129.png) no-repeat left top; } 
</style>

<a class="ahref" data-div=".box1"></a>
<a class="ahref" data-div=".box2"></a>
<a class="ahref" data-div=".box3"></a>

<div class="box1">1</div> 
<div class="box2">2</div> 
<div class="box3">3</div>

Open in new window

Change the image paths for your own images if needed.
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
2 Questions

#1: The code that you have provided here Chris.
Is it compatible with higher versions of JQuery?

#2: There is a LOT of difference between the first code that I posted
Have many lines.
Compared to your code Chris, that only has 6 lines of code.
Is there a Performance difference between the 2 codes, since one if smaller than the other one/
0
 
Chris StanyonCommented:
The code I provided uses the latest version of jQuery (1.9.0). When loading the jQuery library from the google CDN, leaving off the smaller version numbers will always load the latest version.

There is likely to be a performance boost in my code, because a) it's more compact, and b) it uses less functions, but with such a small amount of code you're unlikely to notice the difference.
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Runs great in my site.
Love it.

Thanks for your coding.
Have a rockin' day Chris.

Carrzkiss
0
 
Chris StanyonCommented:
Thanks. You too ;)
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Hey Chris.
I am trying to implement your updated code into another project, as I would like to convert over completely to this code for all my show/hide elements.

The issue that I am having is that, since this was made to work with Images, how do I get it to work with text again?

Thanks
Carrzkiss
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
I opened another question about this issue.
If you would like to check it out.
http://www.experts-exchange.com/Q_28017941.html

Carrzkiss
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

  • 6
  • 5
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now