Jump to content

Toggle Hidden


BK201

Recommended Posts

Argh! JS haha. I'm trying to toggle a input box on and off by click. It toggles on, but then it does not toggle back off. Any help is greatly appreciated.

 

	function show() {
		var character_node = document.getElementById("CC");
		var name_node = document.getElementById("cn_label");
		if (character_node && name_node) {
			name_node.hidden = "";
		} else if (character_node == true && name_node == false) {
			name_node.hidden = "1";
		}
	}

 

		<form name = "Character Creation" action = "scripts/character_creation.php" method = "POST">
				<p onClick="show();" id="CC">Create Character</p>
				<label hidden="1" id="cn_label">Character Name<input type="text" name="name"></label>
		</form>

Link to comment
https://forums.phpfreaks.com/topic/264629-toggle-hidden/
Share on other sites

Use jQuery to ease your scripting.

 

the best way to do with jQuery is

 

<style>
    #cn_label {
      display:none;
    }
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
   $('#CC').click(function() {
      $('#cn_label').toggle('slow', function() {
   });
});
</script>

<form name = "Character Creation" action = "scripts/character_creation.php" method = "POST">
   <p id="CC">Create Character</p>
   <label id="cn_label">Character Name<input type="text" name="name"></label>
</form>

Link to comment
https://forums.phpfreaks.com/topic/264629-toggle-hidden/#findComment-1356382
Share on other sites

I have to agree that you must learn the fundamentals of JS before moving to jQuery. But jQuery helps shorten your script and there are many functions you could do with it. If I've solved your JS problems, please marked this topic as solved on the bottom of this page.

Link to comment
https://forums.phpfreaks.com/topic/264629-toggle-hidden/#findComment-1356401
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.