Hide div and don't show it again - javascript

I have this code that shows and hides two divs when "onmouseover".
function hide_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') e.style.display = 'block';
else e.style.display = 'none';
}
What I want is: when I do the mouseover it hides the div permanently and when I go over again it won't show anymore.
http://codepen.io/anon/pen/XmXjmx
THANKS!

You can just remove any code that sets e.style.display to block.
function hide_visibility(id) {
var e = document.getElementById(id);
e.style.display = 'none';
}
http://codepen.io/anon/pen/ojbzbK

You could just set the html code to blank like so:
$(document).ready(function() {
$( "#item" ).mouseover(function() {
$( "#item" ).html(""); //Set html contents of #item to empty
});
});
Of course you will not be able to unhide this content again as you have removed the html code. This will not matter though if there will not be a need for the element to be made visible again.

Related

CSS-Javascript: Show and Hide div

I want to create a menu where there is just title and a view more link is provided.
If that link is clicked it should open a hidden div and that view more should change to show less or close. And if I click that the div should close again.
So far I have this.
Title 1 View More
<div id="title1_div">
Some Information
</div>
<style>
#title1_div{
display:none;
}
</style>
<script>
function showdiv()
{
document.getElementById('title1_div').style.display = 'block';
}
</script>
This only provides the on click show division. How can I close that div on clicking.
Any help would be appreciated.
Please see this example at JSFiddle: https://jsfiddle.net/eo4cysec/
You just check if the property is set to block, if so you set it to none, else you set it to block. So you have a toggling logic in it.
if(document.getElementById('title1').style.display == 'block') {
document.getElementById('title1').style.display = 'none';
} else {
document.getElementById('title1').style.display = 'block';
}
To set the text to View Less you need the reference of the clicked tag, you pass it as parameter like this:
View More
Then you have the chance to use this parameter and set the innerHTML of it, which is the text that is displayed. So the final function will look like this, where e is now the reference on the a-tag:
function showdiv(e) {
if(document.getElementById('title1').style.display == 'block') {
e.innerHTML = 'View More';
document.getElementById('title1').style.display = 'none';
} else {
e.innerHTML = 'View Less';
document.getElementById('title1').style.display = 'block';
}
}
Please check out this fiddle:
https://jsfiddle.net/g7ry88h7/
Simple function. Call it on click and it'll handle the hide/show:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
Here is a working example.
function showdiv(el) {
if (el.innerHTML == "View More") {
document.getElementById('title1').style.display = 'block';
el.innerHTML = "Show Less";
} else {
document.getElementById('title1').style.display = 'none';
el.innerHTML = "View More";
}
}
#title1 {
display: none;
}
Title 1
<div id="title1">
Some Information
</div>
View More
$('a').click(function () {
$(this).next('div').stop(true, true).slideToggle("fast");
if($(this).html() == 'View More'){
$(this).html('View Less');
} else {
$(this).html('View More');
}
}),

toggle display only working on second click

I have a div that is display:none which should appear when an icon is clicked. My function works but always on the second click. Any ideas what's wrong with the function?
document.getElementById('icon').onclick = function(){
var el = document.getElementById('div');
if ( el.style.display != 'none' ){
el.style.display = 'none';
}
else {
el.style.display = 'block';
};
};
Change your test to the "positive"
if ( el.style.display == 'block' ){
And it will work.
The default is probably not exactly 'none'.
Using jQuery would make that a lot easier, see http://api.jquery.com/toggle/
el.style would refer to inline style , not global style.
so change your code to
<div id="nav_form_container" style="display:none">
and the code will work.
http://jsfiddle.net/2hobbk7u/2/
This is working for me. I believe what you may have been doing was using the div as a selector instead of an ID on your variable.
FIDDLE
HTML:
<button id="icon">Test Button</button>
<div id="test" style="display: none;">I am hidden</div>
JS:
document.getElementById('icon').onclick = function(){
var el = document.getElementById('test');
if ( el.style.display != 'none' ){
el.style.display = 'none';
}
else {
el.style.display = 'block';
};
};

Text does not return to default when different toggle is closed

I am having no success at getting my text to return to it's default value when a different toggled div is clicked upon. Everything else seems to work great except for this one thing. What am I missing in my code? I end up having to click the other div again before it will finally return to the default text.
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
var menu;
$(document).ready(function () {
$('.bio_container').hide();
$('.bio_button').click(function () {
menu = $("#" + $(this).data("menu"));
$(".bio_container:not(#" + menu.attr("id") + ")").slideUp();
var biobutton = $(this);
menu.slideToggle(function(){
biobutton.text($(this).is(':visible') ? '« Close Biography' : 'Read Full Biography »');
});
});
});
Here's a fiddle so you can see where I am so far.
You are not actively updating the other button's text on click, you're almost there.
Missing line inside the slideToggle function:
$(".bio_button").not(biobutton).text('Read Full Biography »');
See updated JSFiddle.
Please understand that this is a quick hack though, and that the many selectors are not performing too greatly - which won't matter much if you don't have many menus to slide.

How to hide a div if the form state is invalid

Can anyone suggest me how to hide a div if the form state is invalid??
Actually my requirement is like this:-
I need to display some success bar while page loading & then I want to hide this div if the form state is invalid when the user clicks on submit button.I have tried this, which worked previously but somehow our UI is changed. So, when i try to integrate this code with new UI, its not working.
<div class="addUser_success">
</div>
<button class="addUser_button" type="submit" onclick="hideDiv()"></button>
Script Code:-
function hideDiv()
{
if (document.getElementById) {
document.getElementById('addUser_success').style.display = 'none';
}
Also i used Jquery, but doesn't work at all
My Jquery code:-
$(document).ready(function ()
{
$(".addUser_button").click(function ()
{
alert("hai1");
$(".addUser_success").hide();
});
});
Any code snippets please????
I think it's
div.style.display = 'none';
and
div.style.display = 'block';
Try this:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}

double click to show an div

I have used a javascript to show div by onclick but when i click outside div i want to hide the div.
after more searches, i have found an function, and it works perfectly
but there is an issue, the code requires double click for first time, to show the dive
my code:
<script>
// click on the div
function toggle( e, id ) {
var el = document.getElementById(id);
el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none';
// save it for hiding
toggle.el = el;
// stop the event right here
if ( e.stopPropagation )
e.stopPropagation();
e.cancelBubble = true;
return false;
}
// click outside the div
document.onclick = function() {
if ( toggle.el ) {
toggle.el.style.display = 'none';
}
}
</script>
<style>#tools{display:none;}</style>
<div id="tools">Hidden div</div>
show/hide
This is my full code, you can test it on your computer.
The question is: The function requires two clicks, i want show the div on click ( one click ) Not ( Double Click )
Try this - http://jsfiddle.net/JjChY/1/
Change
el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none';
to
el.style.display = (el.style.display == 'none' || el.style.display == '') ? 'block' : 'none';
Use this:
el.style.display = window.getComputedStyle(document.getElementById("tools")).getPropertyValue("display") == "none" ? 'block' : 'none';
It should work.
The problem is that el.style.display only reads from the element's inline styles, not its CSS.
So, on the first click el.style.display is '' (blank string), so it's set to 'none'. Then the second time, el.style.display is 'none', so it works.
You need to try to read from the element's CSS if its inline styles are blank. I'm going to use the getStyle method from quirksmode for this:
function getStyle(x, styleProp) {
if (x.currentStyle) {
var y = x.currentStyle[styleProp];
}
else if (window.getComputedStyle) {
var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
}
return y;
}
// click on the div
function toggle(e, id) {
var el = document.getElementById(id);
var display = el.style.display || getStyle(el, 'display');
el.style.display = (display == 'none') ? 'block' : 'none';
// save it for hiding
toggle.el = el;
// stop the event right here
if (e.stopPropagation) e.stopPropagation();
e.cancelBubble = true;
return false;
}
// click outside the div
document.onclick = function() {
if (toggle.el) {
toggle.el.style.display = 'none';
}
}​
DEMO: http://jsfiddle.net/JjChY/2/
Your code is a little convoluted. It can be written much simpler:
<script>
var toggle = function(id) {
var element = document.getElementById(id);
element.className = element.className === 'hidden' ? '' : 'hidden';
return false;
};
</script>
<style>
.hidden {
display: none;
}
</style>
<div id="tools" class="hidden">Hidden div</div>
show/hide
If you have jQuery, you could do something like this for the click outside.
First, set a class on the "tools" div when the mouse is inside it. Remove the class when the mouse is not inside it.
$('#tools').hover( function() {
$('#tools').addClass("inside");
},
function() {
$('#tools').removeClass("inside");
});
Then, track clicks on the HTML. Hide if the "inside" class is not on the "tools" div.
$("html").click( function() {
$("#tools").not(".inside").each( function() {
$("#tools").hide();
});
});

Categories