Solved

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

Posted on 2013-01-31
14
4,730 Views
Last Modified: 2013-02-02
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
Comment
Question by:Wayne Barron
  • 6
  • 5
  • 2
  • +1
14 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 38838947
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
 
LVL 3

Expert Comment

by:Khilu
ID: 38838986
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 38839142
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
 
LVL 1

Expert Comment

by:headshock
ID: 38839147
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 38839160
@headshock - doesn't work - id is undefined!

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

Expert Comment

by:headshock
ID: 38839168
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
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38839884
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 38839928
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
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38839964
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
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 38840002
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
 
LVL 30

Author Closing Comment

by:Wayne Barron
ID: 38840068
Runs great in my site.
Love it.

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

Carrzkiss
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 38840074
Thanks. You too ;)
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38847081
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
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38847135
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now