Javascript Jquery show/hide div better solution

Question

I have two buttons here, and when I hover one of the button, it'll show a div with information(left to right). If the cursor is not on the buttons nor the div, it'll hide. Here is my code, it works for me , but I want to know better solutions than mine. :D Thank you!

HTML:

<button id="Btn_Nav_Equipment" onmouseover="Nav_Over(this.id),Set_Btn_Nav()" onmouseout="Nav_Out(this.id)" ><span></span></button>
<button id="Btn_Nav_Report" onmouseover="Nav_Over(this.id),Set_Btn_Nav()" onmouseout="Nav_Out(this.id)"><span></span></button> 

<div id='Panel_Equipment' style="display:none;" onmouseover="Set_Panel_Nav()"onmouseout='Leave_Panel_Nav(),Nav_Panel_Out(this.id)'></div>
<div id='Panel_Report' style="display:none;" onmouseover="Set_Panel_Nav()" onmouseout='Leave_Panel_Nav(),Nav_Panel_Out(this.id)'></div>

Javascript:

var Btn_Nav=false;
var Panel_Nav=false;

function Nav_Over(id){
  var str=id.split('_');
  var Panel_id='Panel_'+str[2];
  $('#'+Panel_id).animate({width:'show'},300);
}

function Nav_Out(id){
  var str=id.split('_');
  var Panel_id='Panel_'+str[2];   
  if(( Btn_Nav==false)&&(Panel_Nav==false)){
    $('#'+Panel_id).animate({width:'hide'},300);
  }
}
function Nav_Panel_Out(id){
  $('#'+id).animate({width:'hide'},300);
}


function Set_Btn_Nav(){
  Btn_Nav=true;
}

function Set_Panel_Nav(){
Panel_Nav=true;
}

function Leave_Btn_Nav(){
Btn_Nav=false;
}

function Leave_Panel_Nav(){
Panel_Nav=false;
}

Answer 1

Try using the below solution.

$(document).on("mouseover",".btn,.panel",function(){
	if($(this).hasClass("panel")){
  	$(this).removeClass("collapsed");
  }
  else{
    var panel = $(this).attr("data-panel");  
    $("."+panel).removeClass("collapsed");	
  }
});

$(document).on("mouseout",".btn,.panel",function(){
	$(".panel").addClass("collapsed");
});

.collapsed{
  display:none;
}

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<button class="btn_Equipment btn" data-panel="Panel_Equipment"><span>Equipment</span></button>
<button class="btn_Report btn" data-panel="Panel_Report"><span>Report</span></button> 

<div class='Panel_Equipment collapsed panel'>Equipment Div </div>
<div class='Panel_Report collapsed panel'>Report Div</div>

Answer 2

I would prefer doing such things by using HTML and CSS3 only.

button {
    width: 40px;
    height: 40px;
    position: relative;
}

button > div.panel {
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 40px;
    transition: all .3s;
    visibility: hidden;
    opacity: 0;
    width: 200px;
    height: 80px;
    background: white;
    border: 2px solid;
}

button:hover > div.panel {
    visibility: visible;
    opacity: 1;
}

<button>
    B1
    <div class="panel" id="Panel_Equipment">Panel_Equipment</div>
</button>
<button>
    B2
    <div class="panel" id="Panel_Report">Panel_Report</div>
</button>

Answer 3

Here's a simple CSS3 solution, toggling a class on hover with jQuery :

let $info = $(".info")

$("button").hover( () => {
	$info.addClass("onscreen")
}, () => {
	$info.removeClass("onscreen")
})

button {
  margin: 20px;
}

div.info {
  position: absolute;
  top: 50px;
  width: 200px;
  height: 200px;
  background: #90ee90;
  display: flex;
  justify-content: center;
   align-items: center;
   
   transform : translateX(-100%);
   opacity : 0;
   transition: all 0.3s ease-in-out;
}
div.info.onscreen {
    transform: translateX(0);
    opacity : 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hover me</button>

<div class="info">
 <span>Div content</span>
</div>

Answer 4

Trying to answer the question without being able to run your code so it would work, so I'm answering the text itself - the approach I'd take on this would be without javascript. It's rather simple, take a look!

.info-button {
  padding: 5px 10px;
  background: #afa;
  display: inline-block;
  position: relative;
}

.info-box {
  display:none;
}

.info-button:hover .info-box {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 300px;
  padding: 0 20px 10px;
  background: #faa;
}

<div class="info-button">
  <button>Hover me</button>
  <div class="info-box">
    <h1>More info</h1>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

<div class="info-button">
  <button>Hover me</button>
  <div class="info-box">
    <h1>More info</h1>
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Answer 5

Try with hover() function of jquery.And remove the inline mouseover

$('button').hover(function(){
 $('#'+$(this).attr('data-target')).animate({width:'show'},300);
},function(){
$('.panel').animate({width:'hide'},300);
})

.panel{
width:100px;
height:50px;
border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Btn_Nav_Equipment"  data-target="Panel_Equipment">one<span></span></button>
<button id="Btn_Nav_Report" data-target="Panel_Report">two<span></span></button>

<div id='Panel_Equipment'  class="panel" style="display:none;">Panel_Equipment</div>
<div id='Panel_Report'  class="panel" style="display:none;">Panel_Report</div>

Answer 6

$('.btn').hover(function(){
  $('#'+$(this).data('open')).animate({width:'200px'},300);
},function() {
  $('#'+$(this).data('open')).animate({width:'0px'},300);
});

div {
 width:0;
 overflow:hidden;
 background: #ccc; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" data-open="Panel_Equipment" ><span>asdada</span></button>
<button class="btn" data-open="Panel_Report"><span>sdasda</span></button> 

<div id='Panel_Equipment'>text 1</div>
<div id='Panel_Report'> text 2</div>