Woops, I went to edit my post with a modification to the code and I accidentally removed my entire post! Oh well, the code below should give you an understanding on how to create an expand/collapse script. Simply save the code below as whatever.html and test in your browser.
The original code I posted used get/setAttribute, which doesn't seem to be supported by IE. element.className seems to be the proper way to manipulate the property.
Code:
<style>
.hide{
display:none;
}
.show{
display:block;
}
</style>
<script>
function changeClass(element, anchor){
var element = document.getElementById(element);
if(element.className == "hide"){
element.className = "show";
anchor.innerHTML = "Close Question";
}
else{
element.className = "hide";
anchor.innerHTML = "Add a Question";
}
}
</script>
<p>This is some example text...</p>
<p>
<a href="javascript:voide(0);" onclick="javascript:changeClass('question', this);">Add a Question</a>
<div id="question" class="hide">
<form>
<input type="text" name="myQuestion" id="myQuestion" value="" />
<input type="submit" name="submitQuestion" id="submitQuestion" value="Add Question" />
</form>
</div>
</p>
<p>This is some more example text, below question form!</p>
Reply With Quote
Bookmarks