asked on

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

Chris Stanyon

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.

Khilu

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

Chris Stanyon

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.

headshock

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

Chris Stanyon

@headshock - doesn't work - id is undefined!

id is defined in the click() scope so isn't available to the toggle() function

headshock

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.

Wayne Barron

ASKER

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.

Chris Stanyon

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.

Wayne Barron

ASKER

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/

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Wayne Barron

ASKER

Runs great in my site.
Love it.

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

Carrzkiss

Chris Stanyon

Thanks. You too ;)

Wayne Barron

ASKER

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

Wayne Barron

ASKER

I opened another question about this issue.
If you would like to check it out.
https://www.experts-exchange.com/questions/28017941/Get-Toggle-show-hide-to-work-with-Text-instead-of-images.html

Carrzkiss