Develop Reference

Removed onmouseover but can't bring back

Hey guys simple problem I think. Have 3 divs, trying to remove and add back OnMouseOver for "body_flex" div. What am I missing here?
function contact_open() {
$("#body_flex_wrapper_id").removeAttr('onmouseover')
}
function contact_close() {
$("#body_flex_wrapper_id").attr('onmouseover');
}

you can toggle that using attr and removeAttr
$(function(){
$("#btnToggle").click(function(){
if ($("#div1").attr("onmouseover")){
$("#div1").removeAttr("onmouseover");
}
else{
$("#div1").attr("onmouseover", "overx();");
}
})
})
function overx(e){
console.log($("#div1").text());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="btnToggle">Toggle</button>
<div id="div1" onmouseover="overx();">
<span>sample div</span>
</div>

Try this:
function contact_open() {
$("#body_flex_wrapper_id").removeProp('onmouseover', null);
}
function contact_close() {
$("#body_flex_wrapper_id").prop('onmouseover', null);
}

Toggle spans inside an <a>

I am trying to create a function that will toggle optional inputs if chosen, here is what I have done so far:
HTML:
<div>
<input>
<a class="input-toggle" href="#"><span>Toggle Option</span><span>Close</span></a>
<div class="input-toggle-content">
<input name="">
</div>
</div>
JavaScript:
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
$("span:first-of-type").hide();
$("span:last-of-type").show();
});
});
So, the way it should work is when clicked on .input-toggle the div that is just next to it will be toggled and if clicked again the div will go away... I got this bit working, however, I want to also toggle <span>Toggle Option</span> with <span>Close</span> and I can't get it working... I don't know if the way I structured my function is correct?

Try,
$('.input-toggle + div.input-toggle-content').hide();
$(".input-toggle span:last-of-type").hide();
$('.input-toggle').click(function () {
$(this).next('div.input-toggle-content').toggle();
var spans = $('span', this);
spans.not(spans.filter(':visible').hide()).show();
});
DEMO

here you go: http://jsfiddle.net/jPe3A/
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
if($("span:first").is(':hidden')){
$("span:first").show();
$("span:last").hide();
}
else{
$("span:first").hide();
$("span:last").show();
}
});
});

On Same Button-Click, Div fadeOut and fadeIn

i would like to create a one-page website where on click of the button the impressum-div will fade in. Another Click on the same button would then fadeOut the impressum-div.
I already managed it to fadeIn the div on click.
But when I try to use "if" the whole thing doesn't work anymore.
I already found some tipps here and tried them all but nothing really worked for me..
Here my Script-Code:
<script type="text/javascript">
$(document).ready(function() {
function display() {
if (document.getElementById("impressum").style=="none") {
$('#impressum').fadeIn();
}
if (document.getElementById("impressum").style=="block") {
$('#impressum').fadeOut();
}
}
});
</script>
I tried this in several versions (with .click() and so on..), so this is probably totally wrong.
Here my HTML-Code:
<input type="button" id="iButton" value="Impressum" onclick="javascript:display()"/>
<div id="impressum" style="display:none">
<p>Here Impressum</p></div>
Help is very much appreciated, if you could post a complete Function it would bethe best because i am only putting parts wildly together..
Greetings

Just use fadeToggle()
<input type="button" id="iButton" value="Impressum" onclick="javascript:display()" />
<div id="impressum" style="display:none">
<p>Here Impressum</p>
</div>
then
$(document).ready(function () {
$('#iButton').click(function () {
$('#impressum').stop(true).fadeToggle();
})
});
Demo: Fiddle

HTML
<div id="impressum" style="display:none">
<p>Here Impressum</p>
</div>
JavaScript
$('#iButton').click(function () {
$('#impressum').stop(true).fadeToggle();
});
fiddle: http://jsfiddle.net/xKpLe/

You cannot retrieve the display value like that, you need to use window.getComputedStyle:
var elem = document.getElementById("impressum"),
display = window.getComputedStyle(elem,null).getPropertyValue("display");
Fiddle Demo

/* 1: <div onclick="display(this);"></div>*/
var display = function(elm){
var status = G(elm).attrib('data-display')||'false';
if(status=='false'){
G(elm).css({display:'block'});
G(elm).attrib('data-display', 'true');
return false;}
if(status=='true'){
G(elm).css({display:'none'});
G(elm).attrib('data-display', 'false');
return false;}
};
/* 2 */
/* elm.onclick = display;*/
var display = function(ev){
var elm = this||G(ev).source(); //Choice
var status = G(elm).attrib('data-display')||'false';
if(status=='false'){
G(elm).css({display:'block'});
G(elm).attrib('data-display', 'true');
return false;}
if(status=='true'){
G(elm).css({display:'none'});
G(elm).attrib('data-display', 'false');
return false;}
};

javascript functions to show and hide divs

Hello I have the following 2 JavaScript functions to open up a div and to close it.
<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
}
</script>
<script>
function close() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
}
</script>
Here is the html:
<div id="opener"><a href="#1" name="1" onclick=show()>click here</a></div>
<div id="benefits" style="display:none;">
some input in here plus the close button
<div id="upbutton"><a onclick=close()></a></div>
</div>
For some reason the show function works how it should, but the close button does not do its job. So if there is someone who could help me out I really would appreciate. Thanks a lot.

<script>
function show() {
if(document.getElementById('benefits').style.display=='none') {
document.getElementById('benefits').style.display='block';
}
return false;
}
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
return false;
}
</script>
<div id="opener">click here</div>
<div id="benefits" style="display:none;">some input in here plus the close button
<div id="upbutton"><a onclick="return hide();">click here</a></div>
</div>

I usually do this with classes, that seems to force the browsers to reassess all the styling.
.hiddendiv {display:none;}
.visiblediv {display:block;}
then use;
<script>
function show() {
document.getElementById('benefits').className='visiblediv';
}
function close() {
document.getElementById('benefits').className='hiddendiv';
}
</script>
Note the casing of "className" that trips me up a lot

The beauty of jQuery would allow us to do the following:
$(function()
{
var benefits = $('#benefits');
// this is the show function
$('a[name=1]').click(function()
{
benefits.show();
});
// this is the hide function
$('a', benefits).click(function()
{
benefits.hide();
});
});
Alternatively you could have 1 button toggle the display, like this:
$(function()
{
// this is the show and hide function, all in 1!
$('a[name=1]').click(function()
{
$('#benefits').toggle();
});
});

You need the link inside to be clickable, meaning it needs a href with some content, and also, close() is a built-in function of window, so you need to change the name of the function to avoid a conflict.
<div id="upbutton">click to close</div>
Also if you want a real "button" instead of a link, you should use <input type="button"/> or <button/>.

check this:
click here
<div id="benefits" style="display:none;">some input in here plus the close button
<div id="upbutton"><a onclick="close(); return false;"></a></div>
</div>

Rename the closing function as 'hide', for example and it will work.
function hide() {
if(document.getElementById('benefits').style.display=='block') {
document.getElementById('benefits').style.display='none';
}
}

Close appears to be a reserved word of some sort (Possibly referring to window.close). Changing it to something else appears to resolve the issue.
http://jsfiddle.net/c7gdL/1/

You can zip the two with something like this [like jQuery does]:
function toggleMyDiv() {
if (document.getElementById("myDiv").style.display=="block"){
document.getElementById("myDiv").style.display="none"
}
else{
document.getElementById("myDiv").style.display="block";
}
}
..and use the same function in the two buttons - or generally in the page for both functions.

How to show/hide the same blocks inside similar blocks with JQuery

Code as follows:
<div class="mama">
<div class="son">Item 1</div>
</div>
<div class="mama">
<div class="son">Item 2</div>
</div>
$(".mama").hover(
function() {
$(".son").show();
},
function() {
$(".son").hide();
}
);
Forward to help. Thanks!

If you're asking how to only hide the ".son" blocks inside each ".mama" block, then it'd be something like this:
$('.mama').each(function() {
var mama = $(this);
mama.hover(
function() { mama.find('.son').show(); },
function() { mama.find('.son').hide(); }
);
});

if all you're doing is showing or hiding content, you don't need jQuery. CSS already has this functionality
.mama .son {
display:none;
}
.mama:hover .son {
display:block;
}

Use the hover() event and just scope your actions to the relevant elements:
$("div.mama").hover(function() {
$(this).find("div.son").show();
}, function() {
$(this).find("div.son").hide();
});
There are many variations on how you can limit this to only children of the affected element.