Develop Reference

hide button onmouseenter isn't triggering

My onmouseenter function isn't triggering.
I created a button that would allow you to go to the top. However, once there I want the button to have a display property of none. I tried doing it in two ways. One with classList and the other with style.display = 'none'. Both didn't work, am I missing something in the logic ?
EDIT-------------
onmouseleave the button should reappear. I added the function.
Here is a code pen
const topDiv = document.getElementById('topDiv')
const arrowup = document.getElementById('arrowup')
const hideArrow = () => {
if (topDiv) {
arrowup.classList.remove(showme');
arrowup.classlist.add('hideme');
} else {
arrowup.classList.add('showme');
}
}
const showArrow = () => {
if (!topDiv) {
arrowup.classList.remove('hideme');
arrowup.classList.add('showme');
}
}
#top {
height: 1000px;
}
a {
position: fixed;
top: 10px;
}
.showme {
display: block;
}
.hideme {
display: none;
}
<div onmouseleave="showArrow() onmouseenter="hideArrow()" id="top">
hello
</div>
<a class="showme" id="arrowup" onClick="hideArrow()" href="#top">
click me
</a>

There are some issues:
onmouseenter="hideArrow" is missing brackets -> onmouseenter="hideArrow()"
add and remove are functions, that get the class as param -> add('showme')
the return is wrong -> remove it
Working example:
const topDiv = document.getElementById('topDiv')
const arrowup = document.getElementById('arrowup')
const hideArrow = () => {
if (topDiv) {
arrowup.classList.remove('showme');
arrowup.classList.add('hideme');
}
else {
arrowup.classList.add('showme');
}
}
#top {
height: 1000px;
}
a {
position: fixed;
top: 50px;
}
.showme {
display: block;
}
.hideme {
display: none;
}
<div onmouseenter="hideArrow()" id="topDiv">
hello
</div>
<a class="showme" id="arrowup" onClick="hideArrow()" href="#topDiv">
click me
</a>

Remove the return keyword from the if condition because it causes the function to stop running at that point
element.classList.add() is a function while you are assigning classes to the element using the '=' operator. So the correct way to do it is arrowup.classList.add('hideme') and arrowup.classList.remove('showme').

Two buttons switch

I know that it might have been asked billion times, but I could not find any solutions. So, here is my code:
.btn {
width: 200px;
height: 45px;
}
.--selected {
background-color: red;
}
<div class="container">
<button class="btn --selected">uno</button>
<button class="btn">dos</button>
</div>
I need to make that after pressing button it added a --selected class to it, and another one lost it, as if it is a switch between two
Help me out, please

This will add the class to the button clicked and removes the class from all other elements with the class btn.
I changed the classname a little to make it a valid css class name too.
$('.btn').on('click', function() {
$(this).addClass('selected');
$('.btn').not(this).removeClass('selected');
});
.btn {
width: 200px;
height: 45px;
}
.selected {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button class="btn">uno</button>
<button class="btn">dos</button>
</div>

You can try with removeClass() and toggleClass().
Please Note: --selected is not a valid class name. Double dash (--) is used to comment code in CSS. Though you can use like single, triple consecutive dashes, it is good practice to avoid those naming pattern.
$('.btn').click(function(){
$('.selected').removeClass('selected');
$(this).toggleClass('selected');
});
.btn {
width: 200px;
height: 45px;
}
.selected {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button class="btn selected">uno</button>
<button class="btn">dos</button>
</div>

This can be done easily using vanilla Javascript and ES6 as below, not need to add extra library:
const btns = Array.from(document.querySelectorAll('.btn'));
const toggleClass = (e) => {
for (var el of btns) {
el.classList.remove('--selected')
}
e.currentTarget.classList.add('--selected')
}
for (var el of btns) {
el.addEventListener('click', toggleClass)
}
.btn {
width: 200px;
height: 45px;
}
.--selected {
background-color: red;
}
<div class="container">
<button class="btn --selected">uno</button>
<button class="btn">dos</button>
</div>
this code might help you.

Simple:
$('.btn').click(function() {
$('.btn').removeClass('--selected');
$(this).addClass('--selected');
});

how to make a div disappear/appear on hovering on other div?

How to display the line when I hover over my div circle?
#line {
display: none
}
<div id='circle'>
<div id= 'line'>

Assuming you are using jQuery you can use:
var enterHandler = function(){
$("#line").show();
};
var leaveHandler = function(){
$("#line").hide();
};
$("#circle").hover(enterHandler, leaveHandler);

First thing, with your code, it is not clear if the <div>s are siblings are nested. I will give you the solution for both.
Nested
div {
padding: 10px;
background: #99c;
}
#line {
display: none;
background: #9c9;
}
#circle:hover #line {
display: block;
}
<div id='circle'>
<div id='line'>
</div>
</div>
Siblings
div {
padding: 10px;
background: #99c;
}
#line {
display: none;
background: #9c9;
}
#circle:hover + #line {
display: block;
}
<div id='circle'>
</div>
<div id='line'>
</div>

If you are using jQuery then you can simply try:
$('#circle').on('mouseover', function() {
$('#line').show();
});
$('#circle').on('mouseleave', function() {
$('#line').hide();
});

jQuery would be simplest.
$('#circle').hover(function(){
$('#line').css('display','inline');
});
or whatever display property you are going for.

Try this in script tag and use onmouseover and onmouseout events
<script>
function hidediv() {
document.getElementById('line').style.display = 'none';
}
function showdiv() {
document.getElementById('line').style.display = 'block';
}
</script>
<div id='circle' onmouseover="hidediv();" onmouseout="showdiv();" > this is circle
<div id= 'line'>this is line
</div>
</div>

jQuery hide if either div is visible

I have 2 divs that are initially hidden
<div id="whistle" style="display:none;">
<div id="lean" style="display:none;">
I also have a div that is visible
<div id="me" style="display:block">
I have jQuery code that allows only the #whistle or #lean divs to be open at once, their buttons will hide the other.
I currently have code that also hides the #me div, but I would now like the #me div to open back up when both #whistle and #lean are closed.
If you want to see the site, the link is maxdev.tk
The jQuery code is
$(document).ready(function(){
$("#calc").click(function(){
$("#whistle").hide(600);
$("#lean").toggle(900);
});
});
$(document).ready(function(){
$("#whi").click(function(){
$("#lean").hide(600);
$("#whistle").toggle(900);
});
});

This is one way to solve it. Find it also as a pen at the end of this post.
$(document).ready(function() {
function callback() {
if( $('#whistle').hasClass('hidden') && $('#lean').hasClass('hidden') ) {
$('#me').removeClass('hidden');
} else {
$('#me').addClass('hidden');
}
}
$('button[data-for=whistle]').on('click', function() {
$('#whistle').toggleClass('hidden');
$('#lean').addClass('hidden');
callback();
});
$('button[data-for=lean]').on('click', function() {
$('#lean').toggleClass('hidden');
$('#whistle').addClass('hidden');
callback();
});
})
.hidden {
opacity: 0;
height: 0;
overflow: hidden;
padding: 0;
}
div {
background-color: #ccc;
border-radius: 25px;
margin-top: 20px;
padding: 50px;
text-align: center;
transition-duration: 0.4s;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-for="whistle">Whistle</button>
<button data-for="lean">Lean</button>
<div id="whistle" class="hidden">Whistle!</div>
<div id="lean" class="hidden">Lean!</div>
<div id="me">Me!</div>
http://codepen.io/anon/pen/yNJrwe

Add this code to the end of whatever buttons' click function.
if( !$('#whistle').is(':visible') && !$('#lean').is(':visible') ) {
$('#me').css("display","block"); // or use .show();
} else {
$('#me').css("display","none"); // or use .hide();
}

Second toggel should be close when i click back to the first toggle

I have tow toggles. I want appear only one toggle at the time. When i click to second toggle then first toggle should be close.
Javascript
$('#bar').click(function () {
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$('#foo1').slideToggle('slow');
});
HTML
<button id="bar">bar</button>
<div id="foo"></div>
<button id="bar1">bar1</button>
<div id="foo1"></div>
CSS
#foo {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
#foo1 {
width: 100px;
height: 100px;
background-color: green;
display:none;
}
jsfiddle

You can use classes instead of id's
$('.bar').click(function () {
$('.foo').hide(); // hide previous elements
$(this).next().show('slow'); // show next element in the DOM (it will be <div> with class 'foo')
});
Example

I did what you want with classes,
the accordion style,
$('#bar, #bar1').click(function () {
var id = '#'+$(this).attr('data-for');
if ($(id).hasClass('open')) {
$(id).toggleClass('open');
}
else if ($('#foo').hasClass('open') || $('#foo1').hasClass('open')) {
$('#foo').toggleClass('open');
$('#foo1').toggleClass('open');
}
else {
$(id).toggleClass('open');
}
});
#foo {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo1 {
width: 100px;
height: 0;
background-color: green;
display:block;
transition: all .5s;
}
#foo.open, #foo1.open {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="bar" data-for="foo">bar</button>
<div id="foo"></div>
<button id="bar1" data-for="foo1">bar1</button>
<div id="foo1"></div>

hi i have two ways which you can achive it
in this case the first div is sliding up when second div is opening
$('#bar').click(function () {
$("div").slideUp("slow");
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").slideUp("slow");
$('#foo1').slideToggle('slow');
});
case 1 in fiddler
in second case am hiding the first div when am opening the second div
$('#bar').click(function () {
$("div").hide();
$('#foo').slideToggle('slow');
});
$('#bar1').click(function () {
$("div").hide();
$('#foo1').slideToggle('slow');
});
case 2 in fiddler
i hope my answer helps you :)