Show or Hide Div Text...

[davestar_delux]

Hey I am just learning myself some web designery in work. I am getting my head around Javascript, DOM, AJAX, PHP and CSS kinds of stuff.

I am wanting to have some text that the user can click that says "hide" and will collapse a DIV but keep the same text visible but change it to "show" and then show the DIV again.

I know it is something to do with changing the visibility in CSS to hidden or visible and then getElementById I imagine for the text but can't seem to get that to change and also work to show the div.

 

[BFCTom]

You can do stuff like this with jquery.

Pretty sure one of the early tutorials in this link teaches you how to do it. http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

 

[Tripnologist]

http://www.learningjquery.com/2006/09/slicker-show-and-hide

 

[suarve]

Easy with query

$('#myDiv').hide();
$('#myDiv').show();

 

[davestar_delux]

Not sure I have access to jQuery on the works intranet.

 

[blade007]

you don't need jquery to do that!

just a few lines of javascript will do

<script type="text/javascript">
function showHide(ele){
var x;
if ( document.getElementById
&& (x = document.getElementById(ele))
&& x.style )
{
x.style.display = ('none' == x.style.display)? '' : 'none' ;
}
}</script>

</head>

this goes in the head

then

in the HTML

<span class="headingfaq" style="cursor: pointer;" onclick="showHide('tgt1');">Can I buy online? - click to expand <img alt="reveal answer" src="global/expand.gif" /></span><br />
<div id="tgt1" style="display: none;">
<p class="parafaq">Due to the extensive range of wall and floor tiles we have to offer, we have taken the decision to only supply via our selected retail showrooms and directly from our showroom located in Bridgnorth. We feel that to appreciate the fine selection of quality products we have available they need to be seen before a purchase is made to ensure that they are suitable for your specific tiling needs.</p>

</div>

that should show/hide tgt1

 

[blade007]

forgot to say, here's an example we did

http://www.cravendunnill.co.uk/content.asp?page=FAQ

 

[suarve]

you don't need jquery to do that!

just a few lines of javascript will do

<script type="text/javascript">
function showHide(ele){
var x;
if ( document.getElementById
&& (x = document.getElementById(ele))
&& x.style )
{
x.style.display = ('none' == x.style.display)? '' : 'none' ;
}
}</script>

</head>

this goes in the head

then

in the HTML

<span class="headingfaq" style="cursor: pointer;" onclick="showHide('tgt1');">Can I buy online? - click to expand <img alt="reveal answer" src="global/expand.gif" /></span><br />
<div id="tgt1" style="display: none;">
<p class="parafaq">Due to the extensive range of wall and floor tiles we have to offer, we have taken the decision to only supply via our selected retail showrooms and directly from our showroom located in Bridgnorth. We feel that to appreciate the fine selection of quality products we have available they need to be seen before a purchase is made to ensure that they are suitable for your specific tiling needs.</p>

</div>

that should show/hide tgt1

Eurgh, javascript in your html tags, nasty Just import the jquery file from google cdn, chances are the user won't have to re download that file anyway.