Solved

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

Posted on 2013-01-31
14
4,773 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 31

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
 
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 31

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 31

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 31

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 31

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Find out all repos that a user is most active on Github 1 30
Accordion won't close correctly 5 14
Calculating percentage 2 30
Boolean 13 23
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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 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…

749 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