# Solved: How to show and hide a div tag



## danielstoops (Sep 27, 2008)

Hi,

I was wondering how to show and hide a div tag using PHP or another script that works universally with every browser. I don't know any PHP, but because it is server-side, I would have thought that it works with every browser. If you know another method of hiding and showing a div tag that works with every browser.

I was using javascript to show and hide my div tags, but this only works for Mozilla Firefox (which is a HUGE PAIN!).

Thanks for your help!


----------



## TonyBase (Aug 5, 2007)

You could also use CSS. Like,

You could also have a little CSS file that specifies this in a class and say

Unless you want people to choose whether to show/hide the div. That requires a function and some PHP know-how. I recommend W3Schools (yet again), but if you do a Google search like, "learn PHP" or whatever language, it usually points you in the right direction. I'm a little new to PHP myself, but 700 built-in functions, it's very likely that they have something like this, and you can create one otherwise.


----------



## amanxman (Mar 28, 2006)

Hey,

Is this what you're after:


```
<h5><a href="javascript:showHide('details')">Click to show</a></h5>
<div id="details" style="display:none">
<p>Blaa blaa blaa</p>
</div>
```
and put this in a js file

```
// EXPAND
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
```
(i.e. create expand.js, put the above it in, and then call the js in your html with )

It's JS based but works cross browser fine, and is dead simple.

You can also use it multiple times on one page by changing the div=details to detail1, detail2 etc and than you just show/hide detail1/detail 2 etc as required.

Does that help?

Cheers


----------



## danielstoops (Sep 27, 2008)

Thanks very much! I haven't tried it out but I've got a few questions.

Are you sure that this works with every browser because I'm a little concious about this. Also, I don't think this is a problem but I'm going to put this into a .js file that isn't called expand.js that already exists (I've already linked it to my page with the rest of my javascript stuff). Would I write on the .js file this for multiple show and hide: "div=details1, details2, details3"? Lastly, I am using drop-down enus for my page to show and hide the information, so would I just put "value= [neccessary info]" in the option tag or would I need to do something else?

Thanks very much!!!


----------



## amanxman (Mar 28, 2006)

Howdy,

I've tested it in IE6, IE7, IE8, FF3, FF3.5 and Safari and it works 

Yeah of course you can put it in your own existing js file.

To have multiple divs, you don't need to touch the javascript, just the html will look like this:


```
<h5><a href="javascript:showHide('details1')">Click to show</a></h5>
<div id="details1" style="display:none">
<p>Blaa blaa blaa</p>
</div>

<h5><a href="javascript:showHide('details2')">Click to show</a></h5>
<div id="details2" style="display:none">
<p>Blaa blaa blaa</p>
</div>

<h5><a href="javascript:showHide('details3')">Click to show</a></h5>
<div id="details3" style="display:none">
<p>Blaa blaa blaa</p>
</div>
```
Also, you don't need to call it 'details' - basically you just want the xxxx in the js link:

javascript:showHide('xxxxxxx')

to match the div id that you want it to relate to:

As for using them in drop downs, you'll need to experiment; i've not done it before with drop down values; you might need a onchange="javascript:showHide('xxxxxxx')"

That should work...

Have a play


----------



## danielstoops (Sep 27, 2008)

Thanks very much, but I have discovered a problem: I need a code that switches between two div tags, so when a button etc. is clicked on, one div tag will show and another div tag will close.

What I was thinking was two separate codes: one for opening a div tag, and one for closing a div tag. 

Is this possible?

Thanks


----------



## amanxman (Mar 28, 2006)

Hey,

Just look at the JS code, and split it to create yourself a new JS to close only and a new js to open only:


```
function Hide(elementid){
document.getElementById(elementid).style.display = 'none';
}
```
and

```
function Show(elementid){
document.getElementById(elementid).style.display = '';
}
```
So now, in your html, call the requied JS (Hide or Show) with:


```
javascript:Show('xxxxxxx')
```
or

```
javascript:Hide('xxxxxxx')
```
let me know if that works


----------



## danielstoops (Sep 27, 2008)

Do you think that if I used this code, it would work:

one
two

I imagine it would. 
Also, would this also work with all the browsers too?


----------



## amanxman (Mar 28, 2006)

Why don't you try it........


----------



## danielstoops (Sep 27, 2008)

Yer, you're right. I should


----------



## danielstoops (Sep 27, 2008)

yer, thanks that works!


----------



## amanxman (Mar 28, 2006)

Happy Days


----------

