JavaScript Hide/Show - javascript

I'm developing a project, and the actions (CRUD) are split into forms and divs. The divs have a function (hide/show), but I want to know how can I show just 1 div at a time, because the current function allows to show more than 1 div at a time and I don't want that to happen. The code is just a test.
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function myFunction2() {
var x = document.getElementById('myDIV2');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
<html>
<head>
<title>Teste</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js.js"></script>
<table border="1">
<tr>
<td>Teste 1</td>
<td>Teste 2</td>
</tr>
<tr>
<td><a onclick="myFunction()">Show/Hide</button></td>
<td><button onclick="myFunction2()">Show/Hide</button></td>
</tr>
</table>
<div id="myDIV">
<h1>Teste 1</h1>
</div>
<div id="myDIV2">
<h1>Teste 2</h1>
</div>
</body>
</html>

You should hide other DIV, when open another.
Like:
when show DIV = hide DIV2
when show DIV2 = hide DIV

This common example can be treated with jQuery accordion

You can try something like this:
hideAllDivs();
function myFunc(id) {
var x = document.getElementById(id);
if (x.style.display === 'none') {
hideAllDivs();
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
function hideAllDivs() {
var divs = document.getElementsByTagName('div');
if (divs.length > 1) {
for (var i = 0; i < divs.length; i++) {
divs[i].style.display = 'none';
}
}
}

As you have included jQuery in your code, I will give you a jQuery based answer.
You have two buttons:
<button onclick="myFunction()">Show/Hide</button>
<button onclick="myFunction2()">Show/Hide</button>
You can remove the onclick and give them classes instead:
<button class="showhide-1">Show/Hide</button>
<button class="showhide-2">Show/Hide</button>
And you can give the <div>'s you want to Hide/Show a class (which will be myDIVS for the example) and optionally you can use style="display: none;" to hide them both when the page loads.
<div id="myDIV" class="myDIVS" style="display: none;">
<h1>Test 1</h1>
</div>
<div id="myDIV2" class="myDIVS" style="display: none;">
<h1>Test 2</h1>
</div>
Now you just need the jQuery code:
First we need to select the first button using its class, and capture all click events on it, like this:
$('.showhide-1').click(function() {
});
Inside that, you need to 1. Hide #myDIV2 and 2. Show #myDIV.
$('#myDIV2').hide();
$('#myDIV').toggle();
Now just do the same again for the other button:
$('.showhide-2').click(function() {
$('#myDIV').hide();
$('#myDIV2').toggle();
});
$('.showhide-1').click(function() {
$('#myDIV2').hide();
$('#myDIV').toggle();
});
$('.showhide-2').click(function() {
$('#myDIV').hide();
$('#myDIV2').toggle();
});
<html>
<head>
<title>Teste</title>
</head>
<body>
<table border="1">
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr>
<td>
<button class="showhide-1">Show/Hide</button>
</td>
<td>
<button class="showhide-2">Show/Hide</button>
</td>
</tr>
</table>
<div id="myDIV" class="myDIVS" style="display: none;">
<h1>Test 1</h1>
</div>
<div id="myDIV2" class="myDIVS" style="display: none;">
<h1>Test 2</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>

Related

Javascript: Replace a Shown Div with another Hidden Div with Button onclick

i want to replace a div that is already displayed with another Hidden div with just one click. i don't want it to toggle. below is the code.
<html>
<script type="text/javascript">
function show(elementId) {
document.getElementById("surf").style.display="none";
document.getElementById(elementId).style.display="block";
}
</script>
<div id="mode" style="display: visible;">Display By Default</div>
<div id="surf" style="display: none;">Display On Click</div>
<br/>
<button type="submit" id="submit" onclick="show('surf');" name="submit">Submit</button>
</html>
My desired output should be Display On Click when i click the button.
But right now i'm having both Display By Default and Display On Click showing when i click the button display by default at the top and Display On Click at button. i just want Display By Default to be replaced with Display On Click on same line.
<!DOCTYPE html>
<html>
<body>
<div id="div1" style="display:block">
<h2>first div</h2>
</div>
<div id="div2" style="display:none">
<h2>second div</h2>
</div>
<button onclick=show()>click here</button>
</body>
<script>
function show() {
let div1 = document.querySelector('#div1');
let div2 = document.querySelector('#div2');
if (div1.style.display == "block") {
div1.style.display = "none";
div2.style.display = "block";
} else {
div1.style.display = "block";
div2.style.display = "none";
}
}
</script>
</html>
onclick to hide div1 and show div2,
Next click hide div2 and show div1.
You are targeting the wrong element here document.getElementById("surf").style.display="none";. The "surf" should be "mode" instead. This worked for me
function show(elementId) {
document.getElementById("mode").style.display="none";
document.getElementById(elementId).style.display="block";
}
<div id="mode" style="display: visible;">Display By Default</div>
<div id="surf" style="display: none;">Display On Click</div>
<br/>
<button type="submit" id="submit" onclick="show('surf');" name="submit">Submit</button>

Javascript Hide/Show Button Does Not Work Properly

I want to add Javascript show/hide button to show and hide a dive element of my page.
This is my code:
while($r = $query->fetch(PDO::FETCH_OBJ)){
echo "
<html>
<head>
<title>What is the equivalent?</title>
<style>
.center{
margin-left:50%;
}
</style>
</head>
<body>
<div class='center'>
<div class='show'>
<form action='' method='POST'>
<h1>".$r->german."</h1>
<h5>".$r->table_id."</h5>
<p><input type='submit' value='Show' onclick='myFunction()'></input></p></br>
<div id='myDIV'>
This is my DIV element.
</div>
<p></p>
</form>
<a href='en-de.php' style='text-decoration:none'>En to De</a>
</div>
</div>
<hr>
<p>$count</p>
</body>
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</html>
";
}
As you can see I have set this <input type='submit' value='Show' onclick='myFunction()'></input> and the myFunction() is called at the bottom between script tags.
But the problem is it does not work out and div within id of myDIV is always shown at the page.
So how to fix this? What's going wrong here?
If you need more than one form, you should delegate
Do not loop a complete HTML page
Your myDIV is a duplicate ID, use a class instead
Perhaps you meant this - no need for the form at all. If you need a form, use the submit event instead
document.querySelector(".center").addEventListener('click', function(e) {
const tgt = e.target;
if (tgt.classList.contains("toggle")) {
tgt.closest(".show").querySelector(".myDIV").classList.toggle("hide")
}
});
.hide {
display: none;
}
<div class='center'>
<div class='show'>
<h1>german</h1>
<h5>table_id 1</h5>
<p><input type='button' value='Show' class="toggle" /></p>
<div class='myDIV hide'>
This is my DIV element 1
</div>
</div>
<div class='show'>
<h1>german</h1>
<h5>table_id 2</h5>
<p><input type='button' value='Show' class="toggle" /></p>
<div class='myDIV hide'>
This is my DIV element 2
</div>
</div>
</div>
<hr>
<p>$count</p>
Just change your input type to button
<input type='button' value='Show' onclick='myFunction()'></input>

Switching the divs via script in wordpress

I have the following code to switch between 2 divs:
<script>
function SwapDivsWithClick(div1,div2)
{
d1 = document.getElementById(div1);
d2 = document.getElementById(div2);
if( d2.style.display == "none" )
{
d1.style.display = "none";
d2.style.display = "block";
}
else
{
d1.style.display = "block";
d2.style.display = "none";
}
}
var divs = [ "zdroj1", "zdroj2" ];
function toggle(layer) {
var d
for(var i = 0; i < divs.length; i += 1) {
d = document.getElementById(divs[i]);
d.style.display = 'none';
}
d = document.getElementById(layer);
d.style.display = '';
}
</script>
And the HTML part:
<table>
<tbody>
<tr>
<td class="btn" style="text-align: center;"><a href="javascript:toggle('zdroj1')" ><b>VIDEO 1</b></a></div></td>
<td class="btn" style="text-align: center;"><a href="javascript:toggle('zdroj2')" ><b>VIDEO 2</b></a></div></td>
</tr>
</tbody>
</table>
<div id="zdroj1">
VIDEO CODE 1</div>
<div id="zdroj2" style="display:none;">
VIDEO CODE 2</div>
How can I add more divs and show only that one which link is clicked? I think that there must be more if functions in the script but I am not sure, because I am a newbie in this part of coding. Thanks in advance!
Edit: Based on your needs to have a dynamic amount of divs/buttons on each page see the code below. Instead of manually creating the click eventListener you need to get an array(-ish) of the buttons based on a common class name (querySelector could also be used for this) and add the event listener to each. The buttons should be created with a data-attribute (or other identifier) that corresponds to one of the divs you want to toggle.
Inside the function that is called you can loop through all your msg divs, hide them all and unhide the one that matches the data-attribute of the button that was clicked. This method allows you to have any number of buttons and divs as long as each button has a matching div for it to toggle.
// Find all the buttons and divs that have the common className for each
var buttons = document.getElementsByClassName('button')
var divs = document.getElementsByClassName('msg')
function toggle() {
// Loop through the divs and hide them all
for(var i = 0; i < divs.length; i += 1) {
divs[i].style.display = 'none';
}
// Show the div whose id matches the data-message attribute of the button that was clicked
document.getElementById(this.dataset.message).style.display = 'block';
}
// Add a click listener to each button to run the toggle function
for(var i = 0; i < buttons.length; i += 1) {
buttons[i].addEventListener('click', toggle, false)
}
<table>
<tbody>
<tr>
<!-- Add a common class to all buttons and a data-message attribute to each button
that corresponds to the id of the div it will toggle on-->
<td class="btn"><button class="button" data-message="msg1">VIDEO 1</button></td>
<td class="btn"><button class="button" data-message="msg2">VIDEO 2</button></td>
<td class="btn"><button class="button" data-message="msg3">VIDEO 3</button></td>
<td class="btn"><button class="button" data-message="msg4">VIDEO 3</button></td>
</tr>
</tbody>
</table>
<!-- Add a common class to all divs that will be toggled -->
<div class="msg" id="msg1">
VIDEO CODE 1
</div>
<div class="msg" id="msg2" style="display:none;">
VIDEO CODE 2
</div>
<div class="msg" id="msg3" style="display:none;">
VIDEO CODE 3
</div>
<div class="msg" id="msg4" style="display:none;">
VIDEO CODE 4
</div>

How to hide Elements in Javascript

I want that the text ist hidden in the beginning and after clicking the button it is displayed. I would be really greatfull if someone would find the mistake in my code.
function F1()
{
var x = document.getElementById("step1DIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<!DOCTYPE html>
<html>
<body>
<button onclick="F1()"> <b>Step 1</b> </button>
<div id="step1DIV">
<p> text </p>
</div>
</body>
</html>
You need to give it an initial style that hides it in the HTML.
function F1()
{
var x = document.getElementById("step1DIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button onclick="F1()"> <b>Step 1</b> </button>
<div id="step1DIV" style="display: none;">
<p> text </p>
</div>
But inline styles are poor design, it's better to use a class with CSS.
function F1()
{
var x = document.getElementById("step1DIV");
x.classList.toggle("hidden");
}
.hidden {
display: none;
}
<button onclick="F1()"> <b>Step 1</b> </button>
<div id="step1DIV" class="hidden">
<p> text </p>
</div>
I just defined it as 'none' to begin with as such:
<div id="step1DIV" style="display: none">
Try to initially set the display of your step1 DIV to none. Either using inline styling or CSS.
You can also try to run your function on page load.
You want to toggle the hidden attribute defined in the HTML Standard.
function F1 () {
document.getElementById("a").toggleAttribute("hidden");
}
<!DOCTYPE html>
<html>
<body>
<button onclick="F1()"> <b>Step 1</b> </button>
<div id=a>
<p> text </p>
</div>
</body>
</html>

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>

Categories

Resources