Develop Reference

Show div on click

I'm trying to make a div appear and disappear using javascript, but it's not working.I've included the javascript file(where the function is),but I don't understand why it's not working.
When I press the button, nothing happens.
HTML code:
<script type="text/javascript" src="show_on_click.js"></script>
<div id="myDiv" style="display:none" class="answer_list">Button Test</div>
<input type="button" name="answer" onclick="ShowDiv()" value="Test"/>
JavaScript code:
function ShowDiv(){
document.getElementById("myDiv").style.display = 'block';
}

Try this:
<div id="myDiv" style="display:none" class="answer_list">Button Test</div>
<input type="button" name="answer" onclick="ShowDiv()" value="Test"/>
<script>
function ShowDiv(){
document.getElementById("myDiv").style.display = 'block';
}
</script>
There are one or both of two errors:
your src path for script is wrong
somewhere you redefine function for button

Another problem will be: you are only set display to block, not to none again.
Try this:
function ShowDiv() {
var element = document.getElementById("myDiv");
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}

Use two or more Buttons to Show/hide and replace text in single DIV

I'm building an about us page and I'm hoping to use JavaScript to show/hide/replace a DIV's content with a vision statement or a bio depending on which is clicked by the user. I'm brand new to using script, so I'm hoping there is someone who has done this before.
I currently have a button for the bio and one for the vision and while I'm able to show and hide text with no problem I have no clue how to replace the DIV so that the Bio and Vision don't show at the same time.
Here is what I have so far:
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
<button type="button" onclick="javascript:showhide('vision')">Vision</button>
<button type="button" onclick="javascript:showhide('bio')">Bio</button>
<div id="vision" style="display: none;">
<p>This is my vision</p>
</div>
<div id="bio" style="display: none;">
<p>This is my bio</p>
</div>
I'd also like the button text to change to "Hide Bio" or "Hide Vision" depending on which is revealed as well.
If anyone could help with this it would be GREATLY appreciated for a Java Noob like me.
This is also my first time using a forum like this so any pointers or feedback is appreciated...gotta start somewhere, right?
UPDATE - I attached an image to give a better idea of what I'm try to accomplish.

There are a couple of issues with logic. If you show/hide one div, you'll still need to hide/show the second div. So you can either add more lines of code to do that.. or simply you can use one div and update its content based on the button clicked.
so you can try this:
<script>
var textStrings = {"author1": {"Vision":"this is author1 vision", "Bio":"this is author1 bio"},
"author2": {"Vision":"this is author2 vision", "Bio":"this is author2 bio"},
"author3": {"Vision":"this is author3 vision", "Bio":"this is author3 bio"}};
function showhide(element) {
reset();
var id=element.id;
var author = document.getElementById("authors").elements["authors"].value;
var flag = document.getElementById('content').innerHTML == textStrings[author][id];
document.getElementById('content').innerHTML = flag ? "" : textStrings[author][id];
element.innerHTML = flag ? id : "hide " + id;
}
function reset(){
for (var k in textStrings["author1"]){
document.getElementById(k).innerHTML = k;
}
}
function resetAuthor(){
document.getElementById('content').innerHTML = ""
reset();
}
</script>
<form id="authors">
<input type="radio" name="authors" id="author1" onchange="resetAuthor()" value="author1" checked> author 1
<input type="radio" name="authors" id="author2" onchange="resetAuthor()" value="author2"> author 2
<input type="radio" name="authors" id="author3" onchange="resetAuthor()" value="author3"> author 3
</form>
<div style="display:inline">
<button type="button" id="Vision" onclick="javascript:showhide(this)">Vision</button>
<button type="button" id="Bio" onclick="javascript:showhide(this)">Bio</button>
</div>
<div style="display: block;">
<p id="content"></p>
</div>
This code also toggles/set contents as empty if you hit the button again.
DEMO

Try to pass the this object into the inline event handler and check the content's display state to toggle the button's text,
HTML:
<button type="button" onclick="javascript:showhide('vision',this)">Vision</button>
<button type="button" onclick="javascript:showhide('bio',this)">Bio</button>
<div id="vision" style="display: none;">
<p>This is my vision</p>
</div>
<div id="bio" style="display: none;">
<p>This is my bio</p>
</div>
JS
function showhide(id,elem) {
var e = document.getElementById(id);
var cond = (e.style.display == 'block');
e.style.display = cond ? 'none' : 'block';
elem.textContent = (id == "vision") ? (cond ? "Show Vision" : "Hide Vision")
: (cond ? "Show Bio" : "Hide Bio");
}
DEMO

Try this out.
var prevPage = "";
var currPage = "";
function showhide(event) {
prevPage = currPage;
currPage = event.id.split("_")[1];
if(prevPage !== currPage){
showEle(currPage);
if(prevPage !== ''){
hideEle(prevPage);
}
} else {
toggle(currPage);
}
}
function toggle(id){
var curr = document.getElementById(id);
if(curr.style.display === 'block'){
curr.style.display = 'none';
updateBtn('btn_'+id, 'Show');
} else {
curr.style.display = 'block';
updateBtn('btn_'+id, 'Hide');
}
}
function updateBtn(id, newStr){
var btn = document.getElementById(id);
btn.innerHTML = newStr + ' ' + btn.innerHTML.split(' ')[1];
}
function showEle(id){
document.getElementById(id).style.display = 'block';
updateBtn('btn_'+id, 'Hide');
}
function hideEle(id){
document.getElementById(id).style.display = 'none';
updateBtn('btn_'+id, 'Show');
}
<button id="btn_vision" type="button" onclick="showhide(this)">Show Vision</button>
<button id="btn_bio" type="button" onclick="showhide(this)">Show Bio</button>
<button id="btn_xyz" type="button" onclick="showhide(this)">Show Xyz</button>
<button id="btn_abc" type="button" onclick="showhide(this)">Show Abc</button>
<div id="vision" style="display: none;">
<p>This is my vision</p>
</div>
<div id="bio" style="display: none;">
<p>This is my bio</p>
</div>
<div id="xyz" style="display: none;">
<p>This is my xyz</p>
</div>
<div id="abc" style="display: none;">
<p>This is my abc</p>
</div>
Note: You might want to initialize the currPage with the first page's id since it gives a better feel.
Say currPage = "vision" and also make display block for div id = "vision".

How to hide Button in Javascript?

I'm trying to make a button that shows text and another that removes it, this is what I have done so far.
When i click the Click me! button text shows, but it won't disappear when i click the hide button and i don't know why.
<div class="butt">
<button type="button" onclick="myFunction()">Click Me!</button>
<button type="button" onclick="myFunctionHide">Hide</button>
</div>
<p id="test"></p>
<script = "text/javascript">
function myFunction() {
document.getElementById("test").innerHTML = "Andyduly";
}
</script>
<script = "text/javascript">
function myFunctionHide {
document.getElementById("test").innerHTML.object.style.display == "none";
}
</script>

2 issues in your code
<button type="button" onclick="myFunctionHide">Hide</button>
should be
<button type="button" onclick="myFunctionHide()">Hide</button>
function myFunctionHide {
document.getElementById("test").innerHTML.object.style.display == "none";
}
should be
function myFunctionHide() {
document.getElementById("test").style.display = "none";
}
style is property of the element and not the innerHTML.object
Also it is a better idea to avoid inline event handlers, which keeps your HTML cleaner also adhering to separation of concerns which makes your code more maintainable.
HTML
<div class="butt">
<button type="button" id="btn_click">Click Me!</button>
<button type="button" id="btn_hide">Hide</button>
</div>
<p id="test"></p>
JS
var elemTest = document.getElementById('test');
document.getElementById('btn_click').addEventListener('click', function () {
elemTest.innerHTML = "Andyduly";
});
document.getElementById('btn_hide').addEventListener('click', function () {
elemTest.style.display = "none";
});
You can encase your whole code inside a single script tag.
Check Fiddle

See this fiddle
To hide an element using Javscript, try something like
document.getElementById('test').style.display = 'none';
So replace your <script> as below
<script = "text/javascript">
function myFunctionHide() {
document.getElementById("test").style.display = 'none';
}
</script>
There are many errors in your Javascript and HTML
Edited Javascript
function myFunction() {
document.getElementById("test").innerHTML = "Andyduly";
}
function myFunctionHide() {
document.getElementById("test").style.display = "none";
}
You forgot to add () to your myFunctionHide in your Javascript.
Also, the edited HTML would be
<div class="butt">
<button type="button" onclick="myFunction()">Click Me!</button>
<button type="button" onclick="myFunctionHide()">Hide</button>
</div>
<p id="test"></p>

Well, first of all you syntax doesn't look right, should be
function myFunctionHide() {
document.getElementById('test').style.display = 'none';
}

Try this one, I'm clearing the text from "test" P tag.
<div class="butt">
<button type="button" onclick="myFunction()">Click Me!</button>
<button type="button" onclick="myFunctionHide()">Hide</button>
</div>
<p id="test"></p>
<script = "text/javascript">
function myFunction() {
document.getElementById("test").innerHTML = "Andyduly";
}
</script>
<script = "text/javascript">
function myFunctionHide() {
document.getElementById("test").innerHTML = "";
}
</script>

Unable to get javascript to work in hiding div tags

I have the following code to hide a particular div tag and show another when a button is clicked. And for some reason I am not able to get it to work. Any suggestions as what may be wrong?
<div class="profile" align="center">
<form action="register"><br>
<p>Welcome #lastname , #firstname </p>
<div id="readonly" class="input2" style="display:inline">
………code here …
</div>
<div id="editable" class="input2" style="display:none">
…… code here ….
</div>
<div id="editable" class="reginput" style="display:none" >
…… code here ….
</div>
<div align="center">
<input type="button" class="buttoncls" value="Edit" id="btnchange" onclick="hideandshow();" />
</div><br>
<script type="text/javascript">
function hideandshow(){
if(document.getElementById(readonly).style.display = "none"){
document.getElementById(editable).style.display = "none";
document.getElementById(readonly).style.display = "inline";
} else {
document.getElementById(editable).style.display = "inline";
document.getElementById(readonly).style.display = "none";
}
}
</script>
</form>
</div>

You need to wrap the ids with quotes. Like:
document.getElementById('readonly')
//^--------^--------------- see the quotes?
getElementById expects the id to be in string.
Also, ids have to be unique, which in your html is definitely not. Use classes instead.
And, your if condition is using assignment operator =. Instead use ==

Try this
Have a very good look in your if condition you have to use logial operator (==) not (=)
and document.getElementById("editable") is another issue.
<div class="profile" align="center">
<form action="register"><br>
<p>Welcome #lastname , #firstname </p>
<div id="readonly" class="input2" style="display:inline">
………code here …
</div>
<div id="editable" class="input2" style="display:none">
…… code here ….
</div>
<div id="Div1" class="reginput" style="display:none" >
…… code here ….
</div>
<div align="center">
<input type="button" class="buttoncls" value="Edit" id="btnchange" onclick="hideandshow();" />
</div><br>
<script type="text/javascript">
function hideandshow() {
if (document.getElementById('readonly').style.display == "none") {
document.getElementById('editable').style.display = "none";
document.getElementById('readonly').style.display = "inline";
} else {
document.getElementById('editable').style.display = "inline";
document.getElementById('readonly').style.display = "none";
}
}
</script>
</form>
</div>

Try with below changes...
<script type="text/javascript">
function hideandshow(){
if(document.getElementById("readonly").style.display == "none"){
document.getElementById("editable").style.display = "none";
document.getElementById("readonly").style.display = "inline";
} else {
document.getElementById("editable").style.display = "inline";
document.getElementById("readonly").style.display = "none";
}
}
</script>

You have written some code, but seems like you don't know javascript, the mistake you did is whenever you want to get element by using id you have to pass id as string but here you have written directly. i.e. javascript parser and engine will treats that as a variable, in this place all are undefined na, that is the main problem.So write
<script type="text/javascript">
function hideandshow(){
if(document.getElementById("readonly").style.display = "none"){
document.getElementById("editable").style.display = "none";
document.getElementById("readonly").style.display = "inline";
} else {
document.getElementById("editable").style.display = "inline";
document.getElementById("readonly").style.display = "none";
}
}
</script>

is it possible to hide div when another button is click?

I am trying to hide the div's when different buttons are clicked but I don't know how to. (So when 'Test 1' is clicked it should hide 'Test 2' Div and vice versa) I checked here and on Google but couldn't find an answer for it.
Javascript :
function showHide(divId) {
var theDiv = document.getElementById(divId);
if (theDiv.style.display == "none") {
theDiv.style.display = "";
} else {
theDiv.style.display = "none";
}
}
HTML :
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
JSFIDDLE: is not doing it here but works locallyhttp://jsfiddle.net/S5JzK/

<input type="button" onclick="showHide('hidethis')" value="Test It" />
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
function showHide(divId) {
$("#"+divId).toggle();
}
Check the Fiddle http://jsfiddle.net/S5JzK/7/

Please try this, it works well and so simple,
<html>
<head>
<style>
.manageDiv{
display:none;
}
</style>
</head>
<body>
<input type="button" class="testButton" value="Test It" />
<input type="button" class="testButton" value="Test It 2" />
<div id="hidethis2" class="manageDiv">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
</body>
</html>
$(function(){
$(".testButton").on("click", function(){
$("#hidethis2").toggleClass("manageDiv");
});
});

To it work in fiddle, in your example, you need to select (No wrap - in head) on the left.
Look the example below, using pure javascript:
HTML
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
JAVASCRIPT
function showHide(divId) {
/* Hide all divs */
var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
/* Set display */
var theDiv = document.getElementById(divId);
theDiv.style.display = "";
}
http://jsfiddle.net/S5JzK/9/
ANOTHER JAVASCRIPT EXAMPLE
function showHide(divId) {
/* Hide the divs that you want */
var div1 = document.getElementById('#hidethis');
var div2 = document.getElementById('#hidethis2');
div1.style.display = "none";
div2.style.display = "none";
/* Set display */
var theDiv = document.getElementById(divId);
theDiv.style.display = "";
}

Using JQuery:
function showHideDiv(divId, bShow) {
if (bShow) {
$("#" + divId).show();
} else {
$("#" + divId).hide();
}
}

your code seems fine. are you sure you enter the function upon click? try adding a breakpoint using developer tools or an alert.
Anyways, I see you tagged this post with jquery. you can you it to do the task more elegantly.
$("#" + theDiv).hide();
or for showing it:
$("#" + theDiv).show();

"JSFIDDLE: is not doing it here but works locally"
Yes, because by default jsfiddle wraps your JS in an onload handler, which means the function declaration is local to that handler. Inline html attribute event handlers like your onclick="showHide('hidethis')" can only call global functions.
Under jsfiddle's Frameworks & Extensions heading there's a drop-down where you can change the default "onload" to "No wrap - in head" (or "No wrap - in body"). That'll make your function declaration global as in your local implementation.
Demo: http://jsfiddle.net/S5JzK/8/