Animate Javascript show / hide button twice

Question

I have a 'setVisibility' function code with a single button that works well, courtesy of JRulle in this post: Animate Javascript show / hide button.
When button is clicked, it will fade in some text, then when clicked again it fades it out. All good.
However, when I duplicate the code including the script to work in another location down the page, I can't get the first one to work independantly of the added one and visa versa.
Any ideas gratefully received.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>setVisibility</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style type="text/css">body {text-align: center; font-family: Arial; text-align: center;}   input {font-size: 1.1em;}</style>
</head> 
<body><br /><br />

<!--/ FIRST INSTANCE \-->

<script>
function setVisibility(id1) {
  if($('#bt1').val() == 'Hide'){
    $('#bt1').val('Which means ..');
    $('#' + id1).fadeOut();
  }
  else{
    $('#bt1').val('Hide');
    $('#' + id1).fadeIn();
  }
}
</script>

Lorem ipsum dolor sit amet, etc.

    <div style="display: none;" id="sub1">  <br /> Which means...
                                                    <div style="height: 1em;"></div>
Let's see what loves or pursues or desires the pain, etc.
    </div>                                          <div style="height: 1em;"></div>        
    <input type=button name=type id='bt1' value='Which means ..' onclick="setVisibility('sub1');">
                                                    <div style="height: 1em;"></div><hr />
    <!--/ SECOND INSTANCE \-->

Another instance needed here.

</body>
</html>

score 1 · Answer 1 · answered Jul 19 '14 at 17:07

1

Your function is looking for a specific id. Think of it this way: if you have two Bob's in the same room and the doctor calls "Bob?" What do you think will happen? Most likely both Bobs will stand. With your function, it looks for #btn1. The point of functions is to reuse code. How can you reuse a function that states a specific id?

Use a handler to execute your function, while passing the object you clicked.

Let me know if you need more info.

answered Jul 19 '14 at 17:07

vulpcod3z

194
1
11

Ricky thanks. I am asking that the code, including the script of 'Instance one' be copied to where I have 'Instance two' shown in the code. Yes, I know I have to change some numbers including id and that's where I strike a problem. And I don't have the knowledge to use a handler. – Phil P Jul 20 '14 at 04:20
No problem Phil. So I rewrote your code, and separated the javascript and css from the html (more for jsFiddle reasons), and I wrote handlers with a reusable function. _Don't_ _just_ _copy it_, learn from it. Make sure you understand how it works before you use it. I recommend using resources such as www.w3schools.com and jquery.com . They have (imo) great api documentation. Here's the [fiddle](http://jsfiddle.net/vulpCod3z/SRR8e/). – vulpcod3z Jul 21 '14 at 09:46

score 1 · Answer 2 · edited Jul 20 '14 at 05:15

1

Try using jquery's toggle function http://api.jquery.com/toggle/:

$("selector").toggle();

edited Jul 20 '14 at 05:15

Austin Mullins

6,869
2
31
47

answered Jul 20 '14 at 04:28

Super Hornet

2,575
5
23
54

Hi Super Hornet. I did try examples like that but couldn't get the look and effect of the code I supplied. I really need total code too. – Phil P Jul 20 '14 at 04:38

StackSlave · Answer 3 · 2014-07-21T00:44:56.837

1

You should make your CSS and JavaScript external, and your script needs to execute onload or below the defined HTML Elements, but:

function notQuiteFadeToggle(buttonId, hideShowId, hideVal, showVal){
  var btn = $('#'+buttonId), hds = $('#'+hideShowId);
  var hv = hideVal ? hideVal : 'Hide';
  var sv = showVal ? showVal : 'Show';
  btn.click(function(){
    if(btn.val() === hv){
      hds.fadeOut(); btn.val(sv);
    }
    else{
      hds.fadeIn(); btn.val(hv);
    }
  });
}
notQuiteFadeToggle('bt1', 'sub1');
notQuiteFadeToggle('bt2', 'sub2', 'Hide it Now', 'Show it Now');

Put numbers, or what have you, in fadeIn() and fadeOut(), as needed.

edited Jul 21 '14 at 00:44

answered Jul 20 '14 at 05:11

StackSlave

10,198
2
15
30

Thanks PHP glue. Just what I needed. Now that I can place more than one such effect on a web page, I wonder if the button names (values) can be altered from 'Show' and 'Hide' for some of them using something like this: `notQuiteFadeToggle('bt1', 'sub1', ' ', ' ');` `notQuiteFadeToggle('bt2', 'sub2', ' ', ' ');` – Phil P Jul 20 '14 at 21:31
id parameters like `notQuiteFadeToggle('bt1', 'sub1', 'show1', 'hide1');` and `notQuiteFadeToggle('bt2', 'sub2', 'show2', 'hide2');` – Phil P Jul 21 '14 at 00:23

score 0 · Answer 4 · edited May 23 '17 at 10:33

Thank you to Super Hornet, PHPglue and Ricky for your time and a wonderful solution to the code I needed.

PHPglue, you posted this code which answered my original question perfectly. It kept the fadein/fadeout effect. It enabled more than one of the effects to display independently of each other on a single web page. It requires just one piece of JavaScript code:

function notQuiteFadeToggle(button, hideShow){
  var btn = $('#'+button), hds = $('#'+hideShow);
  btn.click(function(){
    if(btn.val() === 'Hide'){
      hds.fadeOut(); btn.val('Show');
    }
    else{
      hds.fadeIn(); btn.val('Hide');
    }
  });
}
notQuiteFadeToggle('bt1', 'sub1');
notQuiteFadeToggle('bt2', 'sub2');

Ricky, you extended on that for my second question, brilliantly. It enabled changing the button texts from "Show" and "Hide" to different words of my choosing, yet leaving the Show and Hide words as default if needed:

function notQuiteFadeToggle(buttonId, hideShowId, hideVal, showVal){
  var btn = $('#'+buttonId), hds = $('#'+hideShowId);
  var hv = hideVal ? hideVal : 'Hide';
  var sv = showVal ? showVal : 'Show';
  btn.click(function(){
    if(btn.val() === hv){
      hds.fadeOut(); btn.val(sv);
    }
    else{
      hds.fadeIn(); btn.val(hv);
    }
  });
}
notQuiteFadeToggle('bt1', 'sub1');
notQuiteFadeToggle('bt2', 'sub2', 'Hide it Now', 'Show it Now');

PHPglue, you pointed out that the script should function after the html activates and that I can place (speed,easing,callback) within fadeIn() and fadeOut(). That extra info was really appreciated.

Ricky, you show your JSFiddle project and demo of it. I see roughly what a 'handler' is now. I am really interested in how JavaScript works, fascinating. Thanks for the reference links, appreciated.

I am now looking to include this line in the windows onload to replace display:none in the div effect:

$('.wait').delay(1000).slideUp();

found in google crawl — display:none? with link to JSFiddle.

Anyway, many, many thanks you guys.

Animate Javascript show / hide button twice

4 Answers4