Convert JavaScript Show/Hide Div to jQuery

Hello All;

The more I advance my site in the direction of jQuery, the more certain functions start acting up and need to be changed out.

This use to work properly, but has now starting giving script errors due to the jquery.js version that I am using now. (Am trying to work my way all the way up to the newest release)

Can someone please convert the the code below to jQuery for me please?

Carrzkiss
var ele = document.getElementById("VideoPlayer");
      var text = document.getElementById("displayText");
      if(ele.style.display == "block") {
                ele.style.display = "none";
            text.innerHTML = "[Show Player]";
                text.href = "Video/loadVid.asp?Vid=N0NE";
        }
      else {
            ele.style.display = "block";
            text.innerHTML = "[Hide Player]";
                
      }
}

Open in new window

LVL 31
Wayne BarronAuthor, Web DeveloperAsked:
Who is Participating?
 
Gurvinder Pal SinghCommented:
try
var ele = $("#VideoPlayer");
var text = $("#displayText");
if ( ele.css("display") == "block" )
{
	ele.css("display", "none");
	text.html("[Show Player]");
	text.attr("href", "Video/loadVid.asp?Vid=N0NE");
}
else
{
	ele.css("display", "block");
	text.html("[Hide Player]");
}

Open in new window

0
 
kadabaCommented:
carrzkiss,

I am not sure why this would throw you an error, but here you go....
Not the exact translation but logic remains the same...

Best,
kadaba

var ele = $("#VideoPlayer");
var text = $("#displayText");

if(text.html() == "[Hide Player]"){
	ele.hide();
	text.html("[Show Player]");
	text.attr("href","Video/loadVid.asp?Vid=N0NE");
}else{
	ele.show();
	text.html("[Hide Player]");
}

Open in new window

0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Thanks guys.
I actually listed the wrong code when I made this post and for that I am sorry.
The code that I meant to list is the following code below.
It is what has been working flawlessly until I started jumping around with jQuery
Versions, and now this code is starting to give errors:

div is null

But, if I remove the reference to jQuery, then this code works.

-------
Also.
Thanks for the translation on the above code.
I do have one question which will probably be answered on this code convertion.

I have noticed that a lot of jQuery code that I find is not "getElementById"
But instead, you list the actual element.
In my case, the code below is used in multiple places with different element id's

Thanks and sorry for the listing of the wrong code.
Carrzkiss

function showHide(divEntry){ 
        var div = document.getElementById(divEntry); 
        if(div.style.display == "none"){ 
            div.style.display = "block"; 
        } 
        else{ 
            div.style.display = "none"; 
        } 
        return; 
    }

Open in new window

0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
Gurvinder Pal SinghCommented:
function showHide(divEntry){
        $("#"+divEntry).toggle();
}

or

function showHide(divEntry){
     var div = $("#"+divEntry);
      if (div.css("display") == "none")
     {
            div.show();
      }
     else
     {
            div.hide();
     }
}
0
 
kadabaCommented:
Carrzkiss,

But, if I remove the reference to jQuery, then this code works.
This is not usually the case as JQ is a lib of js functions.

See the example attached.I have noticed that a lot of jQuery code that I find is not "getElementById"

$("#id") == document.getElementById(id)

$(".classname") == document.getElementsByClassName [Custom function]

So if you see the code convention is simple and they have powerful selectors.

I still don't see any error in your code, except if you have the div as null then the element does not exist

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript">
	function showHide(divEntry){ 
        var div = document.getElementById(divEntry); 
        if(div.style.display == "none"){ 
            div.style.display = "block"; 
        } 
        else{ 
            div.style.display = "none"; 
        } 
        return; 
    }	
	$(document).ready(function(){
		$("#jqbtn").click(function(){
			jqShowHide("#test2");
		});
	});
	
	function jqShowHide(divEntry){
		if($(divEntry).is(':hidden')){
				$(divEntry).show();
			}else{
				$(divEntry).hide();
			}
	}
  </script>
</head>
<body>
<div id="test1" style="display:none;">
This is a div opened with normal javascript
</div>
<input type="button" value="Show/Hide Div using normal JS" onclick="showHide('test1');">
<div id="test2" style="display:none;">
This is a div opened using JQ
</div>
<input type="button" value="Show/Hide Div using JQ" id="jqbtn">
</body>
</html>

Open in new window

0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Thanks guys.
I have to do some checking, because since the code from kadaba works.
Then mine should also work, so there has to be something else that is causing it to go haywire.
(A lot of code to sift through)

Thanks for the information, I am going to leave it as and accept you both as answer.
Thanks once again.
Off on a code hunt.

Carrzkiss
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
@gurvinder372
I accepted your first post, as it will come in handy.

@kadaba
I accepted your last very informative post.

Now, it is time to figure out what is going on with my code.

Carrzkiss
0
 
kadabaCommented:
Carrzkiss,

Thanks.
I know its a huge site you are maintaining, all the best with the upgrade.

Also ele.css("display") is not the most efficient/ recommended way of doing, so you use the hidden selector.
Refer
http://api.jquery.com/hidden-selector/

Best,
kadaba




0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Thanks kadaba
I just ran into a much bigger issue that has my attention at the moment.
I can no longer serve up .net pages on my XP machine for testing.
I am getting this ugly (no information so for on it) Erroc
server application unavailable
Everything that I have read about, is ok on my machine.
So, going to do a reboot and see if maybe it will come back to life.

Just when I was fixing to start testing for URLRewrites.

Have a good one and I will check the site link once I clear up this issue.

Carrzkiss
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Rebooting the computer fixed the error messages that I was receiving.
So that is good.

Have a good one everyone.
Carrzkiss
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.