Javascript onClick and css

EyeSight · 13-07-2010 1:16pm #1

hey guys i'm very good at html, css and php but not javascript yet. i have to finish off a website and so don't have time to learn it fully but i need a tiny bit of javascript to finish the site off.
basically i will have a <h1> that when you click on it, a paragraph will appear. here is a basic version of my 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="en" lang="en">
<head>
	<script>
		function showHideText(id) 
		{
			var elm = document.getElementById(id)
			elm.style.display = box.checked? "inline":"none"
		}
	</script>
	<title>none</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
	<h1 onclick="showHideText('how')" >How to use this site</h1>
	<div id="how" style="display:none;">	
		<p>
		xxxxxxxxxxxxxxxxxxxxxxxxxxxx 
		</p>
	</div>
	
</body>
</html>

i found the showHideText function online which was meant for a checkbox so i know that's wrong but it has the basic idea. also on the w3 website it says onClick supports use in <h1> tags but i don't think it does as my h1 isn't clickable.
any help will be greatly appreciated, i have googled this for days but can only find massive sections of (old)code which tests for different browsers which i'm pretty sure isn't needed anymore

John_Mc · 13-07-2010 1:39pm

function showHideText(id) 
	{
	    var elm = document.getElementById(id)
        if(elm!=null)
        {
            if(elm.style.display=='')
            {
                //Hide it
                elm.style.display='none';
            }
            else
            {
                //Show it
                elm.style.display='';
            }
        }
	}

As for the H1 onclick, it should work for you no problems

Eoin · 13-07-2010 1:40pm

You would need to set the cursor style to "pointer" for the H1. Just because there's an onclick event attached to it doesn't mean that the mouse will appear as a pointer automatically. It will only do that for hyperlinks and maybe some other tags.

Next - you're checking to see if a checkbox is checked. However as you've guessed already, that is not a valid attribute of a div.

I can't remember the shorthand syntax off the top of my head, but something like this should work.

function showHideText(id) 
{
	var elm = document.getElementById(id);
	if (elm)
	{
		if (elm.style.display == "inline") 
		{
			elm.style.display = "none";
		}
		else
		{
			elm.style.display = "inline";
		}
	}
}

If JavaScript isn't firing, then just put in an alert. Start at the first line of the function to make sure the function is being called, and then keep moving the alert down the code until it stops firing - and that's probably about where the problem is.

duffman85 · 13-07-2010 1:47pm

This could be easily done with jQuery - its a javascript library that does most of the work for you.
You just have to include the jQuery library using the <script src="...\jquery-1.4.2.min.js" like below and a <script src="myscript.js"> inside the head tag.

[PHP]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Title</title>
<link rel="Stylesheet" href="/styles.css" />
<script src="path to file\jquery-1.4.2.min.js" type="text/javascript" >
</script>
<script src="showhide.js" type="text/javascript">
</script>
</head>
<body>
<h1 id="showhideh1">Title</h1>
<p id="shpara">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis consectetur sagittis. Donec at vehicula diam. Phasellus nec felis est, tempor rhoncus risus. Ut risus nibh, laoreet a aliquam a, pretium vitae libero. Nulla facilisi. Praesent congue congue faucibus. Aenean vel dui ac tortor fringilla pharetra. Nullam nec diam augue. Integer non leo dictum metus euismod ullamcorper. Proin dictum lacus ac velit placerat luctus.
</p>
</body>
</html>
[/PHP]
I 've given the <h1> tag an id of "showhideh1" and the <p> tag an id of "showhidepara".
The following is javascript but uses the jQuery library.
$() is a selector,

$('#shpara') selects the <p> tag with id 'shpara' and hides it.(replace hide() with show() to show the paragraph)

The next line says when the h1 tag is click call this function. The function selects the paragraph and shows/hides it depending on whether it is currently shown/hidden.

//showhide.js
$(document).ready(function(){
	$('#shpara').hide();
	$('#showhideh1').click(function(){
		$('#shpara').toggle();
		});
	});

EyeSight · 13-07-2010 3:01pm

wow i didn't expect this sort of response. thanks alot for the help i've gotten it working now
i really am greatful

Javascript onClick and css

Comments