[SOLVED] Show/Hide Div tags on click

[summerpewp]

I'm trying to create a page using php and javascript but ran into a small problem..

 

JAVASCRIPT CODE:

<script language="Javascript 1.2"
type="text/javascript">
function show(id)
{
el = document.getElementById(id);
if (el.style.display == 'none')
{
	el.style.display = '';
	el = document.getElementById('more' + id);
	el.innerHTML = 'less...';
} else {

	el.style.display = 'none';
	el = document.getElementById('more' + id);
	el.innerHTML = 'more...';
}
}

</script>

AREA USED:

 

<?php 
$query2 = "SELECT * FROM help WHERE topicid = '%s'";
$sprintf = sprintf($query2,mysql_real_escape_string($_GET['topicid']));
$sql2 = mysql_query($sprintf);
while($row = mysql_fetch_array($sql2)){
echo'<div class="question"><a id="moreinfo" onclick="javascript:show('info');return false;" href="#">'
.$row['question'].'</a></div><br />
<div id="info" style="display: none" class="answer">'.$row['answer'].'</div><br />';
}

?>

 

I think my problem lies in the <a id="moreinfo" area... where the javascipt:show('info');return false;

 

But not totally sure...

 

thanks in advance for any help

[p2grace]

You were right, the link should be this:

 

echo'<div class="question"><a id="moreinfo" onclick="javascript:show(\'info\');return false;" href="#">'
.$row['question'].'</a></div><br />
<div id="info" style="display: none" class="answer">'.$row['answer'].'</div><br />';

 

Let me know if this fixes your problem.

[summerpewp]

It fixed my problem but came up with another one while doing so...

 

I'm about a 1 on a 10 scale of greatness when it comes to javascript... so i dont know how to fix this problem

 

<script language="Javascript 1.2"
type="text/javascript">
function show(id)
{
el = document.getElementById(id);
if (el.style.display == 'none')
{
	el.style.display = '';
	el = document.getElementById('more' + id);
	el.innerHTML = 'less...';
} else {
	el.style.display = 'none';
	el = document.getElementById('more' + id);
	el.innerHTML = 'more...';
}
}

</script>

 

I need the 'less...' and 'more...' to actually be the headings of the question. I'm trying to create a help file, but instead of all questions and answers loading instantly, i would prefer if they were selected and then receive the answer. Which is why I'm doing the hide / show feature.

 

Is there a way to put the .$row['question']. into the javascript some how?

[summerpewp]

just noticed another problem...

 

if there are multiple topics on one page, the "click" only hides or reveals the first topic.. so thats another problem.. gosh i hate javascipt

 

I guess what i'm trying to accomplish is what facebook uses:

 

http://www.facebook.com/help.php?page=1

 

 

[p2grace]

The reason it only shows/hides the first one is because you're not making each div unique.  Each div should have a number behind it (div_1, div_2) and each button would then be associated to each div accordingly.