Page 1 of 1

How to make a expand list?

Posted: Sat Oct 08, 2011 1:44 am
by GiaTuan
I want to do an extensive list with php.I have three kinds of products:phone,books,information technology
It is the third item in the list of Left.php.
Phone include:
iPhone
Samsung
.....
Books:
novel
magazine
...
Information technology is simply showing up center.php information technology.
I want the client click on Phone-> 'iPhone' is hidden
Visitors click on Phone again-> 'iPhone' will appear.
How to make a short list and expand?

Re: How to make a expand list?

Posted: Sat Oct 08, 2011 2:56 am
by Zephni
Use Javascript if you dont want to load up the page again

Code: Select all

function hideShow(item){
    if(document.getElementById(item).visibility == 'visible'){
        document.getElementById(item).visibility = 'hidden';
    }else{
        document.getElementById(item).visibility = 'visible';
    }
}
Then wrap a div around the area you want to hide/show and give it the id='phones', then give the div the property onclick='hideShow('phones');' to execute the function.

ps. My syntax may be wrong, but hope it helps. If you want to just use PHP then just use a switch statement or if around the html output.

Re: How to make a expand list?

Posted: Sun Oct 09, 2011 1:31 am
by GiaTuan
Thank you very much.Your syntax is slightly wrong.I have edited it as follows:

Code: Select all

<script type="text/javascript" language="Javascript">
function hideShow(item,item1,item2){
	if(document.getElementById(item).style.visibility == "visible") {
	document.getElementById(item).style.visibility="hidden" ;
	document.getElementById(item1).style.visibility="hidden" ; 
	document.getElementById(item2).style.visibility="hidden" ; 
	}else{ 
	document.getElementById(item).style.visibility="visible" ;
	document.getElementById(item1).style.visibility="visible" ; 
	document.getElementById(item2).style.visibility="visible" ; 
	}
}
</script>
document.getElementById(item).visibility->document.getElementById(item).style.visibility
then I added <div>:

Code: Select all

<div onclick=hideShow("iphone","samsung","Nokia")>Phones</div>
<div id="iphone" visibility="visible"><a href="#">iPhone</a></div>
<div id="samsung" visibility="visible"><a href="#">Samsung</a></div>
<div id="Nokia" visibility="visible"><a href="#">Nokia</a></div>
it works well :wink:
But I am having a problem :?.When I moved into php code, it does not work.Nothing happens when I press the 'Phones'.Take some time I realized:
html using the character " (double)
php use the character '(single)
correct syntax is:

Code: Select all

<? php
echo "<div onclick=hideShow('iphone','samsung','Nokia')> Phones </ div>";
echo "<div id='iphone' visibility='visible'> <a href='#'> iPhone </ a> </ div>";
echo "<div id='samsung' visibility='visible'> <a href='#'> Samsung </ a> </ div>";
echo "<div id='Nokia' visibility='visible'> <a href='#'> Nokia </ a> </ div>";
?>
although a little syntax error.But thank you very much.

Re: How to make a expand list?

Posted: Mon Oct 10, 2011 2:47 am
by Geraldine639
Oh I am fine for this interest