Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 496
  • Last Modified:

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

0
Wayne Barron
Asked:
Wayne Barron
  • 5
  • 3
  • 2
2 Solutions
 
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 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
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!

 
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 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 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 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 Commented:
Rebooting the computer fixed the error messages that I was receiving.
So that is good.

Have a good one everyone.
Carrzkiss
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 5
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now