Show and Hide layer on click OK but How to change the labels as well?

[dakedee]

Hi Guys.

I have implemented a simple show/hide layer script on my website. This is what I've got:

<script language="javascript">
var show_layer = true;
function showLayer(){
var divlayer = document.getElementById('divlayer');
divlayer.style.display = show_layer?'':'none';
show_layer = !show_layer;
}
</script>

And the code used to call it:

<a href="javascript:showLayer()" class="readmore"><img src="img/more.gif" border="0" /></a><a href="javascript:showLayer()" class="readmore">Read More</a>

Now, the script works just fine - No problems there.

But I would also like to change the text and the image at the button link to some things else so that users know that they have already clicked on that.

For example: From "Read More" --> "Hide this" (and then goes back to Read More after have clicked on it)

As well as the image"more.gif changes to "hide.gif".

(I hope this make some sense '- -)

I can't figure out where to add that to my code. Any help would be greatly appreciated!!!

Thanks

[rangana]

If you'll change your code to:

<a href="#" class="readmore">
<img src="img/more.gif" border="0" id="image" onClick="showImage();return false"/></a>
<a href="#" class="readmore" onClick="read();return false" id="readarea">Read More</a>

and add this in your javascript:

function showImage()
{
document.getElementById('image').src = 'hide.gif';
}
function read()
{
document.getElementById('readarea').innerHTML = 'Hide this';
}

See if it helps

[dakedee]

Hi rangana!

Thank you!

I have tried it but it does not work still.
I see that you removed href="javascript:showLayer()" part. But that is the most important for the whole thing.

Now I have tried it like this"

<a href="javascript:showLayer()" class="readmore">
<img src="img/more.gif" border="0" id="image" onClick="showImage();return false"/></a>
<a href="javascript:showLayer()" class="readmore" onClick="read();return false" id="readarea">Read More</a>

And function showImage() and read() work but ShowLayer() does not work

How to combine them??

[rangana]

I don't understand it..What's in the showLayer() function.
Logically, it will not work, because it's in the <a> tag and we still have the onClick function in the image.

If you'll change the code to:

<a href="javascript:showLayer()" class="readmore">
<img src="img/more.gif" border="0" id="image">
</a>
<a href="javascript:showLayer()" class="readmore" onClick="read();return false" id="readarea">Read More
</a>

the showLayer() function will work.

If you want the both to work, then put them in the same function, could either be in the showLayer or showImage.