I am trying to hide a button (not inside form tags) after it has been clicked.
Once the form is shown, there is no use for the button. So i would like to hide it after clicked
Here's the existing code.
<script type="text/javascript">
$(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
}
function hide() {
myDiv.style.visibility = "hidden";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
button.addEventListener("click", toggle, false);
});
</script>
<input id="info" type="button" value="Имате Въпрос?" class="switchbuton">
You can use jQuery hide
$("#myDiv").hide() // to hide the div
and show like
$("#myDiv").show() // to show the div
Or toggle to toggle the visibility of dom elements
$("#myDiv").toggle() // to toggle the visibility
You can check the result here:
http://jsfiddle.net/jsfiddleCem/33axo20f/2/
Code is:
<style>
.showButon{
background:url('http://spacetelescope.github.io/understanding-json-schema/_static/pass.png');
background-repeat:repeat-y;
height:30px;
text-indent:20px;
}
</style>
<div id="myDiv">
<input id="info" type="button" value="Имате Въпрос?" class="showButon" />
</div>
(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function toggle() {
if (myDiv.style.visibility === "hidden") {
myDiv.style.visibility = "visible";
} else {
myDiv.style.visibility = "hidden";
}
}
button.addEventListener("click", toggle, false);
})()
Why don't you use:
<script type="text/javascript">
$(function(){
$('#info').click(function() {
$(this).hide();
});
});
</script>
<input id="info" type="button" value="Имате Въпрос?" class="switchbuton">
Related
I have a button that should toggle between visibility visible and hidden, and even though I specify in CSS that the div has visibility: hidden, the JS code first sees the CSS as blank (as if I did not specify the style).
Only after the second click (mouseup event in my case), it detects the visibility and the toggling starts working, why?
Here's a snippet:
let button = document.querySelector("#button");
button.addEventListener("mouseup", toggleVisibility)
function toggleVisibility() {
let div = document.getElementById("div");
if (div.style.visibility === "hidden") {
div.style.visibility = "visible";
} else {
div.style.visibility = "hidden";
}
}
#div {
visibility: hidden;
}
<button id="button"> toggle </button>
<div id="div">
<h1> Hello, World! </h1>
</div>
div.style reads from the style attribute not the actual applied styles. To fix this you can either use inline styling or get the computed style via getComputedStyle().
Example inline styling:
let button = document.querySelector("#button");
button.addEventListener("mouseup", toggleVisibility)
function toggleVisibility() {
let div = document.getElementById("div");
if (div.style.visibility === "hidden") {
div.style.visibility = "visible";
} else {
div.style.visibility = "hidden";
}
}
<button id="button"> toggle </button>
<div id="div" style="visibility: hidden;">
<h1> Hello, World! </h1>
</div>
Example getComputedStyle():
let button = document.querySelector("#button");
button.addEventListener("mouseup", toggleVisibility)
function toggleVisibility() {
let div = document.getElementById("div");
const style = window.getComputedStyle(div);
if (style.visibility === "hidden") {
div.style.visibility = "visible";
} else {
div.style.visibility = "hidden";
}
}
#div {
visibility: hidden;
}
<button id="button"> toggle </button>
<div id="div">
<h1> Hello, World! </h1>
</div>
EDIT: As pointed out in the comments toggling a class is another alternative. This is especially useful if you need to change more then one style.
let button = document.querySelector("#button");
button.addEventListener("mouseup", toggleVisibility)
function toggleVisibility() {
let div = document.getElementById("div");
div.classList.toggle('show');
}
#div {
visibility: hidden;
}
#div.show {
visibility: visible;
}
<button id="button"> toggle </button>
<div id="div">
<h1> Hello, World! </h1>
</div>
To evaluate style properties of an element, you need to use the window.getComputedStyle() method.
In your case, the code should be:
<!DOCTYPE html>
<html>
<style>
#div {
visibility: hidden;
}
</style>
<body>
<button id="button"> toggle </button>
<div id="div">
<h1> Hello, World! </h1>
</div>
<script>
let button = document.querySelector("#button");
button.addEventListener("mouseup", toggleVisibility)
function toggleVisibility() {
let div = document.getElementById("div");
if(window.getComputedStyle(div).visibility === "hidden") {
div.style.visibility = "visible";
} else {
div.style.visibility = "hidden";
}
}
</script>
</body>
</html>
Soi if you don't want to use inline-css;
let button = document.querySelector("#button");
button.addEventListener("mouseup", toggleVisibility)
function toggleVisibility() {
let div = document.getElementById("div");
let compStylesStatus = window.getComputedStyle(div).getPropertyValue('visibility');
if (compStylesStatus === "hidden") {
div.style.visibility = "visible";
} else {
div.style.visibility = "hidden"
}
}
#div {
visibility: hidden;
}
<button id="button"> toggle </button>
<div id="div">
<h1> Hello, World! </h1>
</div>
I am using a code that unhides a hidden div.
HTML:
<div id="unhide" style="display:none;">DUMMY TEXT</div>
<button id="expand" name="expand">Show The Div</button>
JS:
document.getElementById("expand").addEventListener("click", function()
{
document.getElementById('unhide').style.display = "block";
});
How can I make the same button hide the div after clicking it again? Is it possible to alter the code I am using now?
use toggle to simple hide and unhide div
$("#expand").click(function() {
$("#unhide").toggle();
});
Use toggle for this show and shide, see below code.
$(document).ready(function(){
$("#expand").click(function(){
$("#unhide").toggle();
});
});
By doing some modifications in JavaScript, you can use the same button to hide the div as well as you can change the button text like below.
JS:
document.getElementById("expand").addEventListener("click", function()
{
var displayDiv = document.getElementById('unhide');
var displayValue = (displayDiv.style.display === "block") ? "none" : "block";
this.innerHTML = (displayValue === "block") ? "Hide The Div" : "Show The Div";
displayDiv.style.display = displayValue;
});
Link reference: https://jsfiddle.net/pitchiahn/hctnvsz1/1/
use simple if-else control flow
document.getElementById("expand").addEventListener("click", function()
{
var elem = document.getElementById('unhide');
if(elem.style.display == "none") { elem.style.display = "block"; }
else { elem.style.display = "none"; }
});
You can use .toggle()
$('#buttonId').on('click', function(e){
$("#DivId").toggle();
$(this).toggleClass('class1')
});
.class1
{
color: orange;
}
use toggleClass() to toggle the class for the button
$('#buttonLogin').on('click', function(e){
$("#login_Box_Div").toggle();
$(this).toggleClass('class1')
});
.class1
{
color: orange;
}
document.getElementById("expand").addEventListener("click", function()
{
if(document.getElementById('unhide').style.display == 'block')
document.getElementById('unhide').style.display = 'none';
else
document.getElementById('unhide').style.display = 'block';
});
you can check the running snippet here
this is pure java script
var button = document.getElementById('button'); // Assumes element with id='button'
button.onclick = function() {
var div = document.getElementById('newpost');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
This worked very well for me, hope it can help someone else. it opens a hidden div in an absolute position and closes it with the same button or the button in the div.
I use it for menu functions.
<div id="myDiv6" style="border:1px solid;background: rgba(255, 255, 255,
0.9);display: none;position: absolute; top: 229px; left: 25%; z-
index:999;height: auto;
width: 500px;">
<h2 >menu item</h2>
what ever you want in the hidden div
<button style="cursor: pointer;border-radius: 12px;background-image: linear-
gradient(to right, red,yellow);font-size:16px;"
onclick="changeStyle6()">Close</button>
</div>
<br/>
<button style="cursor: pointer;border-radius: 12px;background-image: linear-
gradient(to right, red,yellow);font-size:16px;width: 125px;"
onclick="changeStyle6()">button text</button><br/>
<script type="text/javascript">
function changeStyle6(){
var element = document.getElementById("myDiv6");
if(element.style.display == "none") { element.style.display = "block"; }
else { element.style.display = "none"; }
}
</script>
i want to hide button when i click it. But i want my content to be shown when i click the button.
#sectiontohide{
display: none;}
function toggle_div_fun(id) {
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
}
<button onclick="toggle_div_fun('sectiontohide');">Display Content</button>
<div id="sectiontohide">`
this is the content i'd like to show when i click the button and button should disappear
Try this:
function toggle_div_fun(id, btn) {
var divelement = document.getElementById(id);
btn.style.display = "none";
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';
}
<button onclick="toggle_div_fun('sectiontohide', this);">Display Content</button>
<div id="sectiontohide" style="display:none">Content</div>
If you do not need to reuse the code, maybe this is simpler:
<button onclick="document.getElementById('sectiontohide').style.display='block'; this.style.display='none'">Display Content</button>
<div id="sectiontohide" style="display:none">Content</div>
I am using this code:
function check_remember(event) {
if (document.getElementById('rem_email').value == "") {
alert("Harap isi email !");
} else {
document.getElementById('popup_remember').style.display = "none";
event.preventDefault();
}
};
function remember_show() {
document.getElementById('popup_remember').style.display = "block";
};
and this my html :
<button type="button" class="btn-custom remember" onclick="remember_show()">Ingatkan Saya</button>
<!-- PopUp -->
<div id="popup_remember">
<div id="REM">
<form id="form_remember">
<input id="rem_email" name="email" placeholder="Input Email" type="text" class="form-control" required>
<input type="submit" id="sub_rem" value="Agree" onclick="check_remember(event)">
</form>
</div>
</div>
The problem is, i do not know how to when click body modal will hide..
I think this is what you looking for:
WORKING : DEMO
UPDATED DEMO
HTML
<h1> Just Random Header </h1>
<div class="div1"> Hello i am div :) <br /> <br />If you click anywhere then me i will disappear !</div>
CSS
.div1
{
width:310px;
height:100px;
background:#ddd;
}
JS
$(document).mouseup(function (e)
{
var container = $(".div1");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
First get clicked target. Then check if the click event is out of popup div and if it is hidden already. Something like this should work:
$(function(){
$('body').on('click', function(){
var $this = $(arguments[0].target);
var $target = $('#popup_remember');
if( !$this.parents('#popup_remember').length && $this.attr('id') != "REM" && $target.is(':visible') ) $target.hide();
});
});
Check jsFiddle
You could try using jQuery instead of just Javascript.
$(document).ready(function(){
$('body').on('click', function(){
if($('#rem_email').val() === ''){
alert('Harap isi email !');
} else {
$('#popup_remember').hide()
}
}
//Let's add your remember_show function too! It's also an OnClick (As seen in the HTML).
$('btn-custom remember').on('click',function(){
$('popup_remember').show();
});
});
That's your javascript code converted to jQuery. :)
Instead of hide() and show(), you can also use fadeOut() and fadeIn() to animate the opacity of the object you are hiding and showing.
If your trying to make custom modal this may helps you. But this is only for the modal effect and your problem about clicking the body and it will close the modal. JS Fiddle Link
Hope it helps. Happy Coding.
you can use javascript too:
<button type="button" class="btn-custom remember" onclick="remember_show(event)">Ingatkan Saya</button>
Pass the event in the arguments of the calling function. Then you need to add event.stopPropagation(); to stop the event to bubble up in the DOM tree.
function check_remember(event) {
if (document.getElementById('rem_email').value == "") {
alert("Harap isi email !");
} else {
document.getElementById('popup_remember').style.display = "none";
event.preventDefault();
}
event.stopPropagation(); //<----add this to stop the event to bubble up.
};
function remember_show(event) {
document.getElementById('popup_remember').style.display = "block";
event.stopPropagation(); //<----add this to stop the event to bubble up.
};
Now add a event listener on the body like:
function hideModal(e){
document.getElementById('popup_remember').style.display = "none";
event.stopPropagation();
}
document.addEventListener('click', hideModal, false);
Sample Demo:
function check_remember(event) {
if (document.getElementById('rem_email').value == "") {
alert("Harap isi email !");
} else {
document.getElementById('popup_remember').style.display = "none";
event.preventDefault();
}
event.stopPropagation();
};
function remember_show(event) {
document.getElementById('popup_remember').style.display = "block";
event.stopPropagation();
};
function hideModal(e) {
document.getElementById('popup_remember').style.display = "none";
event.stopPropagation();
}
var body = document;
body.addEventListener('click', hideModal, false);
#popup_remember {
display: none;
}
<button type="button" class="btn-custom remember" onclick="remember_show(event)">Ingatkan Saya</button>
<!-- PopUp -->
<div id="popup_remember">
<div id="REM">
<form id="form_remember">
<input id="rem_email" name="email" placeholder="Input Email" type="text" class="form-control" required>
<input type="submit" id="sub_rem" value="Agree" onclick="check_remember(event)">
</form>
</div>
</div>
The below code snippet shows the invite code when I click "Invite Code". But how do I re-hide the invite code if the same link is clicked again? And can it be done where it cycles back and forth with subsequent clicks? I didn't write this code but merely modified it to my use. I am still very new to this type of thing. Thanks!
<style>
div.hide { display:none; }
div.show { text-align:center; }
</style>
<script type='text/javascript'>
function showText(show, hide) {
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<br>
<font color="red">-</font>Home<font color="red"> / </font><a onclick="showText('text1')" href="javascript:void(0);">Invite Code</a>-</font>
<div id="text1" class="hide"><font color="red">abc123</font></div>
</center></h3>
Simply use this function:
function showText(id)
{
var elem = document.getElementById(id);
if(elem.style.display == 'none')
{
elem.style.display = 'inline';
}
else
{
elem.style.display = 'none';
}
}
<a onClick="showText('text1');" href="#">Show or Hide</a><br/>
<div style="height: 30px;"><div id="text1" style="display: none;">Text to hide or show... WTF?!</div></div>
<div>This text should not move.</div>
PS: This also works for 2 Elements...
Greetings
I really don't see the use for the show class. You could just toggle the hide class on the elements that you want to toggle.
Assume you dont need the show class, then use the classList.toggle function like this
function toggle(target){
document.getElementById(target).classList.toggle('hide');
}
.hide{ display:none }
<button onclick="toggle('test')">Show / Hide</button>
<div id="test" class="hide">Hello world!</div>
save the state with a boolean
var hided = true;
function showText(show,hide){
if (hided){
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
else{
document.getElementById(show).className = "hide";
document.getElementById(hide).className = "show";
}
hided = !hided;
}
fiddle with this code and some of your html : fiddle,
isn't it the expected behavior ?
<html>
<div ID="content" style="display:block;">This is content.</div>
<script type="text/javascript">
function toggleContent() {
// Get the DOM reference
var contentId = document.getElementById("content");
// Toggle
contentId.style.display == "block" ? contentId.style.display = "none" :
contentId.style.display = "block";
}
</script>
<button onclick="toggleContent()">Toggle</button>
</html>
//Code is pretty self explanatory.