[SOLVED] Displaying + removing HTML code

[Andy17]

Hey guys,

 

I would like to have a script that displays some HTML on the page when a text link is pressed and then removes it when you click the link again. Displaying the HTML wouldn't really be a problem, but I am not sure how to remove it again. Could anyone please help me out with some code?

 

Thank you in advance!

[emehrkay]

very easy

 

first set up the area in which you want to add/remove html

 

<div id="add_remove_area"></div>

 

set up your link

 

<a href="#" id="add_remove_link" >add remove html</a>

 

now your js is very simple. in the head add this code

 

<script>

onload = function(){

var link = document.getElementById('add_remove_link');

var container = document.getElementById('add_remove_area');

var status = false;

var content = 'your html here';

 

link.onclick = function(){

status = status ? false : true;

container.innerHTML = status ? '' : content;

};

};

</script>

 

i didnt test that, but it should work

[emehrkay]

you may need to flip the innerHTML and status setting in the onclick function

[Andy17]

Hello emehrkay and thanks for your help.

 

I had to change the variable "status" to true or else I would have to click twice for the HTML to show. Anyways, since the JS code is in the head and the function is called from the body, the HTML is displays above my text link. Is it possible to display it below the link?

 

Thank you in advance!

[Andy17]

Bump.

[emehrkay]

put the div under your link

 

<a...>

<div id="add_remove_area"></div>