Simple Show/Hide Button

**Fray** · 09-09-2012 05:31 AM

Hi. Sorry but i'm not english so i can make some grammar mistakes. I've written this code:

HTML Code:

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> 
<head> 
	<title>Lirians</title> 
	<script type="text/javascript" charset="UTF-8" src="skrypty.js"></script>
	<script type="text/javascript" charset="UTF-8" src="jquery-1.3.2.js"></script>
	<script type="text/javascript" src="http://koval.ovh.org/skrypty/getebc.js"> </script>
</head> 
<body>
	
	<div id="spany"> 
		<span class="ukryj">Ukryj Tekst</span><br />
		<span>Lorum Ipsum </span>
                <span class="ukryj">Ukryj Tekst</span><br />
		<span>Lorum Ipsum </span>
	</div>
	
	<script type="text/javascript" charset="UTF-8">
		document.getElementsByClassName('ukryj').onclick = ukrywaj;
		
		function ukrywaj() {
			var zmienna = this.nextSibling.nextSibling.style.display;
			if (zmienna == 'inline') {zmienna = 'none';}
			else {zmienna = 'inline';}
		}
	</script>

</body>
</html>

My question is:
- Code is wrong because of "display of undefined". I have span, br and span so first span is like a button and it has to show or hide a next span. I'm beginner but it seems to be a simple mistake. Please help.

**vwphillips** · 09-09-2012 06:17 AM

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
	<title>Lirians</title>
	<script type="text/javascript" charset="UTF-8" src="skrypty.js"></script>
	<script type="text/javascript" charset="UTF-8" src="jquery-1.3.2.js"></script>
	<script type="text/javascript" src="http://koval.ovh.org/skrypty/getebc.js"> </script>
</head>
<body>

	<div id="spany">
		<span id="ukryj0">Ukryj Tekst</span><br />
		<span>Lorum Ipsum </span>
                <span id="ukryj1">Ukryj Tekst</span><br />
		<span>Lorum Ipsum </span>
	</div>

	<script type="text/javascript" charset="UTF-8">
//		not all browsers support document.getElementsByClassName
 for (var z0=0;document.getElementById('ukryj'+z0);z0++){
  document.getElementById('ukryj'+z0).onclick = ukrywaj;
 }

		function ukrywaj() {
			var zmienna = this.nextSibling.nextSibling;
            zmienna.style.display=zmienna.style.display!='none'?'none':'inline';
		}
	</script>

</body>
</html>

**Fray** · 09-09-2012 06:31 AM

It doesn't work. I'm using Chrome and there is:
"Uncaught TypeError: Cannot read property 'display' of undefined"

**vwphillips** · 09-09-2012 08:05 AM

that is because you have white space between the <br> and span

use HTML

Code:

	<div id="spany">
		<span id="ukryj0">Ukryj Tekst</span><br /><span>Lorum Ipsum </span>
        <span id="ukryj1">Ukryj Tekst</span><br /><span>Lorum Ipsum </span>
	</div>

**Fray** · 09-09-2012 11:38 AM

You don't know how much i'm happy that it's working right now. I've forgotten about whitespace

Thx

Thread: Simple Show/Hide Button

Thread Tools

Display

Simple Show/Hide Button

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions