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>
Related
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>
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>
I just need div.accordion1 to be opened when I click on a#accordion1. Im not an expert on Javascript. I have /wp-includes/js/jquery/jquery.js?ver=1.12.4 loading on the page trying to use the simple html layout below:
in the header section:
<div class="header">
toggle open / close accordion1
toggle open / close accordion2
</div>
positioned somewhere in the body of page:
<div class="body">
<div class="accordion1">
Lorem Ipsum....
</div>
<div class="accordion2">
Lorem Ipsum....
</div>
</div>
if i understand right, you want when you press the toggle button, to show a paragraph, and when you click the same button to hide the specific paragraph
here is a good example from w3-schools
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp
you have to make a button that calls a function on click
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
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/
I am trying to hide a button (not inside form tags) after it has been clicked. Below is the existing code. All solutions I have tried either break the functionality or interfere with the form on the page.
The content between the DIV hidden-dev tags is hidden until the button near the bottom of the code is clicked. Once that button is clicked, all of the remaining content is shown to the user.
Once the content is shown, there is no use for the button "Check Availability" so I would like to hide it (especially because the submit button appears for the core form, and it is confusing to see both at the bottom of the full length page.
Here's the existing code that does everything properly (except hide the button after the click)...
<html>
<head>
<style>
.hidden-div {
display:none
}
</style>
</head>
<body>
<div class="reform">
<form id="reform" action="action.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="" />
<fieldset>
content here...
</fieldset>
<div class="hidden-div" id="hidden-div">
<fieldset>
more content here that is hidden until the button below is clicked...
</fieldset>
</form>
</div>
<span style="display:block; padding-left:640px; margin-top:10px;">
<button onclick="getElementById('hidden-div').style.display = 'block'">Check Availability</button>
</span>
</div>
</body>
</html>
Change the button to :
<button onclick="getElementById('hidden-div').style.display = 'block'; this.style.display = 'none'">Check Availability</button>
FIDDLE
Or even better, use a proper event handler by identifying the button :
<button id="show_button">Check Availability</button>
and a script
<script type="text/javascript">
var button = document.getElementById('show_button')
button.addEventListener('click',hideshow,false);
function hideshow() {
document.getElementById('hidden-div').style.display = 'block';
this.style.display = 'none'
}
</script>
FIDDLE
This is my solution. I Hide and then confirm check
onclick="return ConfirmSubmit(this);" />
function ConfirmSubmit(sender)
{
sender.disabled = true;
var displayValue = sender.style.
sender.style.display = 'none'
if (confirm('Seguro que desea entregar los paquetes?')) {
sender.disabled = false
return true;
}
sender.disabled = false;
sender.style.display = displayValue;
return false;
}
Here is another solution using Jquery I find it a little easier and neater than inline JS sometimes.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
/* if you prefer to functionize and use onclick= rather then the .on bind
function hide_show(){
$(this).hide();
$("#hidden-div").show();
}
*/
$(function(){
$("#chkbtn").on('click',function() {
$(this).hide();
$("#hidden-div").show();
});
});
</script>
<style>
.hidden-div {
display:none
}
</style>
</head>
<body>
<div class="reform">
<form id="reform" action="action.php" method="post" enctype="multipart/form-data">
<input type="hidden" name="type" value="" />
<fieldset>
content here...
</fieldset>
<div class="hidden-div" id="hidden-div">
<fieldset>
more content here that is hidden until the button below is clicked...
</fieldset>
</form>
</div>
<span style="display:block; padding-left:640px; margin-top:10px;"><button id="chkbtn">Check Availability</button></span>
</div>
</body>
</html>
CSS code:
.hide{
display:none;
}
.show{
display:block;
}
Html code:
<button onclick="block_none()">Check Availability</button>
Javascript Code:
function block_none(){
document.getElementById('hidden-div').classList.add('show');
document.getElementById('button-id').classList.add('hide');
}
You can use this
Html
<button class="btn-plus" onclick="afficherTexte(<?php echo $u["id"]."2" ?>,event)">+</button>
Java script
function afficherTexte(id,event){
var x = document.getElementById(id);
x.style.display = "block";
event.target.style.display = "none";
}