We Keep Coding

What's a simple, non-jquery way to toggle between two divs using two buttons?

I'm looking for a simple, non-jquery method of toggling between two divs. Specifically, clicking button A will show div A content (and hide div B content), and clicking button B will show div B content (and hide div A content. I want div A content to appear by default when the page loads.
The code I have isn't hiding the appropriate divs from the onclick
I've looked around, but every solution seems overly complex or seems to involve jquery - which I would really prefer not to use, because I have to work with an old jquery library on a site where I shouldn't be updating that stuff.
<button class="button" onclick="content_A(); Hide_Content_B;">Content A</button>
<button class="button" onclick="content_B(); Hide_Content_A;">Content B</button>
<script>
function Content_A() {
var x = document.getElementById("A");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<script>
function Hide_Content_B() {
var x = document.getElementById("B");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "none";
}
}
</script>
<script>
function Content_B() {
var x = document.getElementById("B");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<script>
function Hide_Content_A() {
var x = document.getElementById("A");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "none";
}
}
</script>
<div id="A"> stuff</div>
<div id="B"> other stuff </div>

Create one function showContent that takes the id of the element you want
to toggle as parameter and just toggles a CSS class, i.e visible on the element with that id.
Use CSS classes to initially hide the "toggleable" elements. You can set the visible class directly on the element you want shown on page load.
Here's an example:
function showContent(id) {
document.getElementById(id).classList.toggle('visible')
}
/*
All elements with class "toggleable"
should be hidden.
*/
.toggleable {
display: none;
}
/*
All elements that have both
class "toggleable" and "visible"
should be visible.
*/
.toggleable.visible {
display: block;
}
<button onclick="showContent('a');" >Show Content A</button>
<button onclick="showContent('b');" >Show Content B</button>
<div class="toggleable visible" id="a">
Hello Content A!
</div>
<div class="toggleable" id="b">
Hello Content B!
</div>

About your code:
You have to call the function using parenthesis like Hide_Content_A() and Hide_Content_B(); which are misssing in onclick of the <button>
The functions Content_B and Content_B start with uppercase C.
The fix your own code, just run Hide_Content_B(); at the end to hide the second one.
Note that you can also use a single <script> block.
function Content_A() {
var x = document.getElementById("A");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function Hide_Content_B() {
var x = document.getElementById("B");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "none";
}
}
function Content_B() {
var x = document.getElementById("B");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function Hide_Content_A() {
var x = document.getElementById("A");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "none";
}
}
Hide_Content_B();
<button class="button" onclick="Content_A(); Hide_Content_B();">Content
A
</button>
<button class="button" onclick="Content_B(); Hide_Content_A();">Content
B
</button>
<div id="A"> stuff</div>
<div id="B"> other stuff</div>

If you dont want to use jQuery, you should consider not using javascript at all.
You can do the same with pure css. Also the styling of button tags some times brakes in other devices, so I suggest to use tag or just a span
Here is a pure CSS solution:
input {
display:none;
}
input[name="toggle"] + .toggleContent{
max-height: 0;
overflow: hidden;
transition: max-height .4s;
}
input[name="toggle"]:checked + .toggleContent{
max-height: 100px;
}
<label for="A">A Button</label>
<input type="radio" name="toggle" value="1" id="A" checked="checked">
<div class="toggleContent">This is content for A</div>
<label for="B">B Button</label>
<input type="radio" name="toggle" value="2" id="B">
<div class="toggleContent">This is content for B</div>

Here's a simple solution that requires jQuery 1.7 or above, since you mentioned that you're working with an old jQuery library!
$(document).on('click', '.map-point-sm', function() {
var show = $(this).data('show');
$(show).removeClass("hide").siblings().addClass("hide");
});
.hide {
display: none;
}
.map-container {
text-align: center;
}
button{
width: 5%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div class="map-container">
<div class="inner-basic division-map div-toggle" data-target=".division-details" id="divisiondetail">
<button class="map-point-sm" data-show=".a">
<div class="content">
<div class="centered-y">
<p>A</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".b">
<div class="content">
<div class="centered-y">
<p>B</p>
</div>
</div>
</button>
</div>
</div>
<div class="map-container">
<div class="inner-basic division-details">
<div class="initialmsg">
<p>A Content here</p>
</div>
<div class="a hide">
<p>A Content here</p>
</div>
<div class="b hide">
<p>B Content here</p>
</div>
</div>
</div>

There are some great answers here, but I think I'll probably go with The fourth bird's because it's the simplest. Thanks everybody!

If you are interested in a non-JS solution, you can use sibling input elements to perform a button toggle effect. Simply match the for attributes with the id attributes.
form {
display: flex;
flex-wrap: wrap;
}
input {
display: none;
}
input:checked + label {
background-color: #eee;
}
label {
cursor: pointer;
padding: 12px;
display: inline-block;
}
.container {
display: none;
background-color: #eee;
order: 1;
padding: 12px;
width: 100%;
}
input:checked + label + .container {
display: block;
}
<form>
<input id="a" type="radio" name="container" checked="checked">
<label for="a">button a</label>
<div class="container">content a</div>
<input id="b" type="radio" name="container">
<label for="b">button b</label>
<div class="container">content b</div>
</form>

Bring a div infront of other divs by clicking a button using javascript?

I have 3 divs and 3 buttons.
I want a javascript code for , if I click button1 then all the divs should be visible.
if I click button2, then div2 should be visible only, and it should be infront of div1 and div3.
if I click button3 , then div3 should be visible only , and it should be infront of both div2 and div3.
My code is bellow:
[<html>
<head></head>
<body>
<input type="button" id="button1" onclick="button1Click();"/>
<input type="button" id="button2" onclick="button2Click();"/>
<input type="button" id="button3" onclick="button3Click();"/>
<div id="id1">
<input type="checkbox" />
</div>
<div id="id2">
<input type="checkbox" />
</div>
<div id="id3">
<input type="checkbox" />
</div>
<script type="text/javascript">
function button1Click() {
var DivId1 = document.getElementById("id1");
var DivId2 = document.getElementById("id2");
var DivId3 = document.getElementById("id3");
DivId1.style.visibility = "visible";
DivId2.style.visibility = "visible";
DivId3.style.visibility = "visible";
}
function buttonClick2() {
var DivId1 = document.getElementById("id1");
var DivId2 = document.getElementById("id2");
var DivId3 = document.getElementById("id3");
DivId1.style.visibility = "hidden";
DivId2.style.visibility = "visible";
DivId3.style.visibility = "hidden";
}
function buttonClick3() {
var DivId1 = document.getElementById("id1");
var DivId2 = document.getElementById("id2");
var DivId3 = document.getElementById("id3");
DivId1.style.visibility = "hidden";
DivId2.style.visibility = "hidden";
DivId3.style.visibility = "visible";
}
</script>
</body>
</html>][1]
but this clickevent can only appears or disappers a div but cannot bring a div infront of other divs. As a result there is free space like the second pic infront of the div.

Instead of visibility hidden/visible, you can use display block/none which will not occupy space when the element is hidden. Is this what you are looking for?
function button1Click() {
var DivId1 = document.getElementById("id1");
var DivId2 = document.getElementById("id2");
var DivId3 = document.getElementById("id3");
DivId1.style.display = "block";
DivId2.style.display = "block";
DivId3.style.display = "block";
}
function buttonClick2() {
var DivId1 = document.getElementById("id1");
var DivId2 = document.getElementById("id2");
var DivId3 = document.getElementById("id3");
DivId1.style.display = "none";
DivId2.style.visibility = "block";
DivId3.style.display = "none";
}
function buttonClick3() {
var DivId1 = document.getElementById("id1");
var DivId2 = document.getElementById("id2");
var DivId3 = document.getElementById("id3");
DivId1.style.display = "none";
DivId2.style.display = "none";
DivId3.style.display = "block";
}
<input type="button" id="button1" onclick="button1Click();" />
<input type="button" id="button2" onclick="buttonClick2();" />
<input type="button" id="button3" onclick="buttonClick3();" />
<div id="id1">
<input type="checkbox" />111
</div>
<div id="id2">
<input type="checkbox" />222
</div>
<div id="id3">
<input type="checkbox" />333
</div>

You should use DivId.style.display = 'none' to hide and DivId.style.display = 'block' to show.

If you can use jQuery, you can use following code. If you cannot use jQuery, you can use JavaScript to use the same approach. Basically, you need to do these things:
Specify (using some attribute) for each button, which target elements should be shown on clicking the button.
Now, add classes or some other distinguishing attribute to the content div's that need to be shown/hidden.
In click event, check which button was clicked, get its target divs, and show them, hiding all others.
$("#links a").on("click", function(e){
e.preventDefault();
var targetClass = $(this).data("target");
$("#contents .items").hide();
$("#contents ." + targetClass).show();
});//#links a click()
#links{
float: left;
width: 100px;
}
#links a{
display: block;
}
#contents{
float: left;
}
#contents .items{
background-color: #ddd;
margin: 1px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="links">
all
its
xyz
</div>
<div id="contents">
<div class="items">only items</div>
<div class="items its">its</div>
<div class="items xyz">xyz</div>
<div class="items its">its</div>
<div class="items">none</div>
<div class="items its xyz">its and xyz both</div>
<div class="items its">its</div>
</div><!--#contents-->

Show/hide text area box + swap between image onclick

I am creating form page where I wanted to hide text area box when clicked on image as well as to swap the image and vice-versa. Right now I am able to hide/show div but image is not displayed when text area box is hidden and also does not return to first image. There are 2 scripts one for div show/hide and another to swap image.
1. image: output before click
2. image: after hitting on an image
<script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}
}
var onImg= "testim.png, valm.png";
var offImg= "testip.png, valp.png";
</script>
<div style="margin-top: 10px; text-align: center;">
<ul id="text_type_tab" name="text_type_tab">
<li id="PR_TEXT_TAB" class="tab_active"> <img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li>
</ul>
</div>
<table id="hidden_content" width="80%" align="center" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px">
<tr>
<td colspan="2">
<textarea id="textInputField1" name="textInputField1" style="resize:vertical; width: 900px;" rows="15" cols="105" wrap="pre" onblur="onTextSubmitFunction('Apply')"></textarea>
</td>
</tr>
</table>
Please help.
Thanks a lot, in advance!
[1]: http://i.stack.imgur.com/7PwdK.png
[2]: http://i.stack.imgur.com/5j6FE.png

Pointer 1
Change the below variable to the absolute link of your image
var onImg= "testim.png, valm.png"; //this should be one link
var offImg= "testip.png, valp.png"; //this should be one link
(Just to be on the safe side for testing test)
example
var onImg= "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSHrNNGyEGlgXtd5u4fq1eQ18z8TMXHCZqf_4zI9yz6uo7N8KeXuFVRr-tR";
var offImg= "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01";
Pointer 2
change
<li id="PR_TEXT_TAB" class="tab_active"> <img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li>
</ul>
to this
<li id="PR_TEXT_TAB" class="tab_active"> <img src="testim.png" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li>
</ul>
that is it should be </a></li> instead of </li></a>
Pointer 3
Change this
<a href="javascript:showhide('textInputField1');">
to this
<a href="#" onclick="javascript:showhide('textInputField1')">
Attach it directly to the onclick event since href attribute simply points to a location.
here is a snippet
- <script>
function showhide(id){
if (document.getElementById){
obj = document.getElementById(id);
obj.style.display == "none"?obj.style.display = "":obj.style.display = "none";
// if (obj.style.display == "none"){
// obj.style.display = "":;
// }
//else {
// obj.style.display = "none";
//}
}
}
var onImg= "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSHrNNGyEGlgXtd5u4fq1eQ18z8TMXHCZqf_4zI9yz6uo7N8KeXuFVRr-tR";
var offImg= "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01";
</script>
<div style="margin-top: 10px; text-align: center;">
<ul id="text_type_tab" name="text_type_tab">
<li id="PR_TEXT_TAB" class="tab_active"> <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR8x25Dihzxt-pilDC6-SAVJ8JEVB4VItyjJhRFFuAGNFPx5YBbR5rQST01" onclick="this.src = (this.src.endsWith(offImg)? onImg : offImg);" align="middle"/></li>
</ul>
</div>
<table id="hidden_content" width="80%" align="center" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px">
<tr>
<td colspan="2">
<textarea id="textInputField1" name="textInputField1" style="resize:vertical; width: 900px;" rows="15" cols="105" wrap="pre" onblur="onTextSubmitFunction('Apply')"></textarea>
</td>
</tr>
</table>

Javascript appear/disappear objects

I am working on a project right now. When you click on one item the info below appears, i wanted to know how to make it disappear when you click on the next item without reclicking the same item....For example I have pizza's in my project, I want to click meat pizza to see the toppings then click on cheese pizza to see the toppings and the meat toppings disappear.
Here is my Html code....
<table align="center">
<tr>
<td><fieldset style="border:1px solid red;padding:5px;
margin-bottom:10px;width:200px; height:150px">
<a onclick ="javascript:ShowHide('HiddenDiv')" href="#Meat">Meat Pizza</a>
</fieldset></td>
<td><fieldset style="border:1px solid red;padding:5px;
margin-bottom:10px; width:200px; height:150px">
<a onclick ="javascript:ShowHide('HiddenDiv2')" href="#Cheese">
Cheese Pizza</a>
</fieldset></td>
<td><fieldset style="border:1px solid red;padding:5px;
margin-bottom:10px; width:200px; height:150px;">
<a onclick ="javascript:ShowHide('HiddenDiv3')" href="#Veggie">
Veggie Pizza</a>
</fieldset></td>
</tr>
</table>
<div class="mid" id="HiddenDiv" style="DISPLAY: none" align="center">
<a name="Meat">
<table>
<tr><td width="220">Meat Toppings</td></tr>
</table>
</a>
</div>
<div class="mid" id="HiddenDiv2" style="DISPLAY: none" align="center">
<a name="Cheese">
<table>
<tr><td width="220">Cheese Toppings</td></tr>
</table>
</a>
</div>
<div class="mid" id="HiddenDiv3" style="DISPLAY: none" align="center">
<a name="Veggie">
<table>
<tr><td width="220">Veggie Toppings</td></tr>
</table>
</a>
</div>
Here is my javascript......
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
function showApp(a) {
var aside = document.getElementById('aside');
var arr = aside.getElementsByTagName('span');
for (i = 0; i < arr.length; i++) {
if (arr[i].getAttribute('id') != a) {
arr[i].style.visibility = 'hidden';
}
}
x = document.getElementById(a);
var state;
if (x.style.visibility == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}
x.style.visibility = state;
}

Some solutions for example:
You may create global JS element which will contain current showed element and update it every click.
You may on every click hide all elements at first and then show required element.

Add for loop in ShowHide() function like this :
UPDATED
ShowHide = function(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
var alltexts = document.getElementsByClassName('mid');
for(var i=0;i<alltexts.length;i++)
alltexts[i].style.display = 'none';
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
In ShowHide we have to hide all texts before showing the clicked item text .
Find Working Fiddle HERE.

Clicking on a link, takes me to the bottom of the page instead of the place from where I called it

As soon as I click on 'Hide' link below, my page goes to the bottom. How can I make it go to the place from where it opened?
My code:
<li>How do I maximize battery life?</li>
<div id="basic2" style="display:none; background-color:#fff; padding:5px; margin-left: 11px;">
<p>Wadfasfsafasfas</p>
Hide</li>
<div id="basic2" style="display:none; background-color:#fff; padding:5px; margin-left: 11px;">
</div>
<p> </p>
<hr />
</div>
Function:
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none")
{
document.getElementById(d).style.display = "block";
}
else
{
document.getElementById(d).style.display = "none";
}
}

Whenever you have an onClick in a link (like onclick="ReverseDisplay('basic2');" you want to make sure it returns false.
Something like this should work : onclick="ReverseDisplay('basic2');return false;"

You've got duplicate element ids "basic2"
Edit
I think what you're looking for is something like this. Where "Hide" toggles the parent element:
<li>How do I maximize battery life?</li>
<div id="basic1" style="display:none; background-color:#fff; padding:5px; margin-left: 11px;">
<p>Wadfasfsafasfas</p>
Hide</li>
<p> </p>
<hr />
</div>
<script>
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
</script>