How to reverse the hide event of a div onclick - javascript

I have a div and a button which i would like to show/hide the div when its clicked:
<input type="button" name="info" value="Contact Information" onclick="showDiv()">
<div align="center" id="element" style="display: none;">bla</div>
And this piece of script:
function showDiv() {
document.getElementById('element').style.display = "block";
if( ... )
document.getElementById('element').style.display = "none";
}
The display style of the div is none,so its hidden.The first line of the js script changes that value into block,so the div its displayed now. Now i need something to reverse the first line,in case the button its triggered again.So i thought a conditional statement will do it,but i have no idea how to build it. Something line : "if the display style its block,execute the code between {}"
Any idea?

Edit
function toggleDiv(elementId, button, textOn, textOff) {
var style = document.getElementById(elementId).style;
if( style.display == "none" ) {
style.display = "block";
button.innerHTML = textOn;
} else {
style.display = "none";
button.innerHTML = textOff;
}
}
<button name="info" onclick="toggleDiv('element', this, 'Hide Contact Information', 'Show Contact Information')">Show Contact Information</button>
<div align="center" id="element" style="display: none;">bla</div>
Original Answer
function toggleDiv() {
if( document.getElementById('element').style.display == "none" ) {
document.getElementById('element').style.display = "block";
} else {
document.getElementById('element').style.display = "none";
}
}

Using the browser DOM directly is very annoying and your solution may not work in all browsers. You should use some javascript framework like jQuery, prototype or mootools. In jQuery what you want to do is as simple as this:
$("#element").toggle()
If you insist on using raw javascript you can try this:
function showDiv() {
if( document.getElementById('element').style.display == 'block' )
document.getElementById('element').style.display = "none";
else
document.getElementById('element').style.display = "block";
}

<input type="button" name="info" value="Contact Information" onclick="showDiv()">
<div align="center" id="element" style="display: none;">bla</div>
<script>
function showDiv() {
var div = document.getElementById('element').style.display;
if( div == 'block' )
document.getElementById('element').style.display = "none";
else
document.getElementById('element').style.display = "block";
}
</script>

Related

Hide form content until button is clicked

I would like to hide the content of my form until the button is clicked, the code I am using shows content until clicked, I am starting out so probably missing something simple, any help appreciated, the code I am using is:
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
you must add "display: none;" to "myDiv" property in css file then you can use your func
I think this is what you need
Heres the code:
document.getElementById("myButton").onclick = function() {
document.getElementById("myInput").style.display = "block";
}
<form>
<input type="text" id="myInput" style="display: none;">
</form>
<button id="myButton">Click</button>
Try this :
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display == "none" || x.style.display == "") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
#myDIV {
border:solid 1px #c0c0c0;
padding:10px;
display:none;
}
<input type="button" onclick="myFunction();" value="switch" /><br>
<div id="myDIV">Welcome</div>
Because, if display is decalred in css to none (or whatever but not in DOM element) then javascript will "see" it like empty string. Or, set in <div id="myDIV" style="display:none;"></div>.
By my opinon, first code is better choice.

Initially I want ON button to be display block and off to display none, if I click ON button, OFF appears & On disappears, and vice versa

I am trying to achieve a toggle effect using display properties, only one button should be on display at a time, while the other is hidden and vice versa. Currently, I am able to hide the off button if I click any of the buttons, so what do I do to get only one displayed at a time
function myFunction() {
var x = document.getElementById("on");
var y = document.getElementById("off");
y.style.display ="none";
if (x.style.display === "none") {
x.style.display = "block";
}
else {
y.style.display = "none";
x.style.display = "block";
}
}
<button onclick="myFunction()" id="on">ON</button>
<button onclick="myFunction()" id="off">OFF</button>
The issue with your logic is that you need to switch the display state of both elements within the function you call:
var on = document.getElementById("on");
var off = document.getElementById("off");
function myFunction() {
if (on.style.display === "none") {
off.style.display = "none";
on.style.display = "block";
} else {
off.style.display = "block";
on.style.display = "none";
}
}
<button onclick="myFunction()" id="on">ON</button>
<button onclick="myFunction()" id="off" style="display: none;">OFF</button>
Another way to do what you require would be to use a CSS class to hide the required element. This avoids the need for the if condition. You can then use classList.toggle() to switch the class on/off on each element on successive clicks. Something like this:
let toggles = document.querySelectorAll('.toggle');
toggles.forEach(toggle => {
toggle.addEventListener('click', e => {
toggles.forEach(el => el.classList.toggle('hide'));
});
});
.hide { display: none; }
<button class="toggle" id="on">ON</button>
<button class="toggle hide" id="off">OFF</button>
Or even more simply using jQuery:
let $toggles = $('.toggle').on('click', () => $toggles.toggleClass('hide'));
.hide { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button class="toggle" id="on">ON</button>
<button class="toggle hide" id="off">OFF</button>
In this solution, when the on and off buttons are clicked, the toggle() method is called and the display properties are changed. In order to hide a button initially, I set the display property of the <button> with an off id value to none; this feature can also be provided by using the onload event that is triggered when the page is loaded.
const on = document.getElementById('on');
const off = document.getElementById('off');
function toggle(){
if(on.style.display === 'none'){
on.style.display = 'block';
off.style.display = 'none';
}
else{
on.style.display = 'none';
off.style.display = 'block';
}
}
on.addEventListener('click', function(){
toggle();
});
off.addEventListener('click', function(){
toggle();
});
#on {
display: block;
}
#off {
display: none;
}
<button id="on">ON</button>
<button id="off">OFF</button>

Changing HTML code with Javascript show/hide

I have tried a few different things, including a switch statement, appending using JQuery etc. and I can't get this to work with the button. What I am trying to do is change the words in P2 from:
Please push `<button id = "me" onclick = "toggle1('me');">this </button>` to show more information about me.
to:
Please push `<button id = "me" onclick = "toggle1('me');">this </button>` to hide more information about me.
I have to do the same thing with "courses" but I think if I could understand the first one, I could get how to do the second see/hide on my own.
I am so confused now :/
I think it has something to do with span tags, but I honestly am in my first week of HTML and have not learned what are probably really simple procedures for things like this yet. I would appreciate any and all the help I can get to help me figure this out.
<!DOCTYPE html>
<html>
<head>
<title>About me</title>
<style>
body
{
background-color:#ADD8E6;
}
#p3
{
display:none;
}
#myImage
{
width:280px;
height:280px;
}
#schedule
{
width: 100%;
display:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language = "javascript" >
function changeImage()
{
var image = document.getElementById('myImage');
if (image.src.match("hrgswitch"))
{
image.src = "hrg.jpg";
}
else
{
image.src = "hrgswitch.jpg";
}
}
function toggle1(obj)
{
if(obj == "me")
{
if(document.getElementById("p3").style.display == "none" || document.getElementById("p3").style.display == "")
{
document.getElementById("p3").style.display = "block";
}
}
else
{
document.getElementById("p3").style.display = "none";
}
}
else if (obj == "courses")
{
if(document.getElementById("schedule").style.display == "none" || document.getElementById("schedule").style.display == "")
{
document.getElementById("schedule").style.display = "block";
}
else
{
document.getElementById("schedule").style.display = "none";
}
}
}
</script>
</head>
<body>
<h1> My Page </h1>
<img id="myImage" onclick="changeImage();" src="hrg.jpg" />
<p title="About Me">
Stuff about me <br>
Here is a link to learn more about HTML!
<br>
<br>
</p>
<p id = "p2">
<br>
<br>
Please push <button id = "me" onclick = "toggle1('me');">this </button> to see more information about me.
<br>
<br>
Please push <button id = "courses" onclick = "toggle1('courses');">this </button> to see my list of courses."
</p>
<p id = "p3" >
More stuff about me...
<br>
</p>
<br>
<table id = "schedule">
<tr>
<td>Course Name</td>
<td>Date</td>
<td>Time</td>
</tr>
<tr>
<td>Programming Paradigms</td>
<td>Tuesday / Thursday</td>
<td>11:00-12:15</td>
</tr>
<tr>
<td>Computer Organization</td>
<td>Tuesday / Thursday</td>
<td>9:30-10:45</td>
</tr>
<tr>
<td>Linear Algebra</td>
<td>Monday/Wednesday/Friday</td>
<td>11:50-12:40</td>
</tr>
<tr>
<td>Combinatorics </td>
<td>Monday/Wednesday/Friday</td>
<td>8:35-9:25</td>
</tr>
</table>
</body>
</html>
You have a Syntax Error in your function toggle1. Remove unwanted braces. Try this:
<script language = "javascript" >
function toggle1(obj)
{
if(obj == "me")
{
if(document.getElementById("p3").style.display == "none" || document.getElementById("p3").style.display == "")
{
document.getElementById("p3").style.display = "block";
}
else
{
document.getElementById("p3").style.display = "none";
}
}
else if (obj == "courses")
{
if(document.getElementById("schedule").style.display == "none" || document.getElementById("schedule").style.display == "")
{
document.getElementById("schedule").style.display = "block";
}
else
{
document.getElementById("schedule").style.display = "none";
}
}
}
</script>
But, if you are using jQuery, toggle is an inbuilt function. this is very simple as(Inline JS - Although Recommended as seperate Script): Remove your toggle1 function and change your two html onclick attributes:
Please push <button id = "me" onclick = "$('#p3').toggle()">this </button> to see more information about me.
Please push <button id = "courses" onclick = "$('#schedule').toggle()">this </button> to see my list of courses.
It may be easier with jQuery, something along these lines...
`<script`>
function showhide() {
$( "#showhide" ).text( "hide" );
}
`</script`>
<p>Please push this to <span id="showhide">show</span> more information about me. </p>
<button onclick="showhide()">Hi</button>

Perform validation on CheckBox check/uncheck in javascript

Here i have one check box if that check box is checked then i want to display one div and if that checkbox is unchecked then i want to hide that div.
Below is my code its not working please help .
<div class="row1" id="homemove"> <span class="label">Home Move</span>
<input type="checkbox" id="homecheck" onclick="HomeMove()" </input>
</div>
function HomeMove() {
if (document.SalesNew.HomeMove.checked) {
document.getElementById("NewAddress").style.display = "block";
} else if (!document.SalesNew.HomeMove.checked) {
document.getElementById("NewAddress").style.display = "none";
}
}
Replace your Javascript HomeMove function as below
function HomeMove() {
if (document.getElementById("homecheck").checked) {
document.getElementById("NewAddress").style.display = "block";
} else {
document.getElementById("NewAddress").style.display = "none";
}
}
Not sure what document.SalesNew.HomeMove is supposed to be, but you should just create an event handler like so:
<div class="row1" id="homemove">
<span class="label">Home Move</span>
<input type="checkbox" id="homecheck"></input>
</div>
<script type="text/javascript">
document.getElementById('homecheck').onchange = function() {
document.getElementById("NewAddress").style.display = this.checked ? 'block' : 'none';
}
</script>
Also, you don't have an element with the ID NewAddress, but I'm guessing there is one in the actual code you're using.
Or, if you want to keep your own code, you could do it this way:
http://jsbin.com/uludes/1/edit
Try out the following fiddle: http://jsfiddle.net/GtmWX/2/
Simple checkbox to show/hide div
HTML
<p>Check here to show div <input type="checkbox" name="checkbox" id="checkbox" tabindex="165" /></p>
<div id="hiddenDiv"></div>
JS
function setUp() {
document.getElementById("checkbox").onclick = function() {
if (document.getElementById("checkbox").checked) {
// show div
document.getElementById("hiddenDiv").style.display = "block";
} else {
// hide div
document.getElementById("hiddenDiv").style.display = "none";
}
};
// hide on initial page load
document.getElementById("hiddenDiv").style.display = "none";
}
window.onload = function() {
setUp();
};

formatting lose when showing a previously hidden div

So my webpage shows a new div when you click on an existing div. This hidden div has exactly the same formatting as the existing visible div, but when it is made to appear, all of that formatting is lost and I can't quite work out why. Here's the code:
<div id="visible" class="visibleDiv" onclick="expandItem()">
Stuff here
</div>
<div id="invisible" class="hiddenDiv">
Stuff here
</div>
And here's my JavaScript:
function expandItem() {
if (document.getElementById("invisible").style.display == '') {
document.getElementById("invisible").style.display = 'block';
}
Any help is greatly appreciated!
Try This
<div id="visible" class="visibleDiv" onclick="expandItem()">
Stuff here
</div>
<div id="invisible" style="display:none;" class="hiddenDiv">
Stuff here
</div>
And make change in javascript
function expandItem() {
if (document.getElementById("invisible").style.display == 'none') {
document.getElementById("invisible").style.display = 'block';
}
yeah this should fetch the solution
function expandItem() {
if (document.getElementById("invisible").style.display == 'none' || document.getElementById("invisible").style.display == '') {
document.getElementById("invisible").style.display = 'block';
}
this line
document.getElementById("invisible").style.display == ''
is irrelavent , the main code to be executed is
document.getElementById("invisible").style.display == 'none'

Categories

Resources