Solved

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

Posted on 2013-01-31
14
4,702 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 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
Comment Utility
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 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
Comment Utility
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 42

Expert Comment

by:Chris Stanyon
Comment Utility
@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
Comment Utility
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
Comment Utility
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
Comment Utility
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 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
Comment Utility
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
Comment Utility
Runs great in my site.
Love it.

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

Carrzkiss
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Thanks. You too ;)
0
 
LVL 30

Author Comment

by:Wayne Barron
Comment Utility
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
Comment Utility
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

772 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

10 Experts available now in Live!

Get 1:1 Help Now