jQuery menu dropdown bubbles

Question

So I have this menu that needs to display a box when any item is hovered over. The box is a div that contains heading text and image, here is my code. I'm trying to write a function that will toggle different box on item hover.

For example, hover over 'button 1' and it should toggle '#tab1', hover over 'button 3' toggle '#tab3'.

Class dropdown content has display: none to hide all the divs.

Please any help is appreciated!

$('#secondary-menu li').hover(function(){ 
  var arr= ['1','2','3','4','5'];
  $.each($(this),function(index,value){
    //I don't know what to insert here
    $('#tab'+ [arr]).toggle();
  });
});

$('#secondary-menu li').onmouseout(function(){
  $('#tab' + [arr]).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre>
  <code>
    <div id="secondary-menu">
      <ul>
        <li>button 1</li>
        <li>button 2</li>
        <li>button 3</li>
        <li>button 4</li>
        <li>button 5</li>
      </ul>
    </div>

    <div id="tab1" class='dropdown-content'>
      <h5>Some Heading</h5>
      <img src="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
    </div>

    <div id="tab2" class='dropdown-content'>
      <h5>Heading Two</h5>
      <img src="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
    </div>
  
    <div id="tab3" class='dropdown-content'>
      <h5>Heading Three</h5>
      <img src="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
    </div>

    <div id="tab4" class='dropdown-content'>
      <h5>Heading Four</h5>
      <img src="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
    </div>

    <div id="tab5" class='dropdown-content'>
      <h5>Heading Five</h5>
      <img src="">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
    </div>
  </code>
</pre>

Icewine · Answer 1 · 2017-08-25T05:57:13.193

Just a little bit of refactoring of your code and used show/hide for the mouse over. Also used data attribute for to link the li button to the proper div box.

// ***********
// One way is to get count for all classes with the dropdown-content and loop through appending the data attribute.
// ***********
function AddMe(){

  var i = 1; // counter
  
  // loop through each .dropdown-content class and append
  // a li with incremented data-id
  $(".dropdown-content").each(function(){
    
    // content is here
    $("#secondary-menu ul").append("<li data-id='"+i+"'> button "+i+"</li>");
    
    i++; // increment the counter
    
  });
}

// ***********
//start function
// ***********
AddMe();

// ***********
//Events
// ***********
$('#secondary-menu li').on("mouseover", function() {
  var id = $(this).attr("data-id");
  $("#tab" + id).show();
});

$('#secondary-menu li').on("mouseout", function() {
  var id = $(this).attr("data-id");
  $("#tab" + id).hide();
});

.dropdown-content {
  display: none;
}

li:hover {
  cursor: pointer;
  background: skyblue;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="secondary-menu">
  <ul>
  <!--
    <li data-id="1">button 1</li>
    <li data-id="2">button 2</li>
    <li data-id="3">button 3</li>
    <li data-id="4">button 4</li>
    <li data-id="5">button 5</li>
    -->
  </ul>
</div>

<div id="content">

  <div id="tab1" class='dropdown-content'>
    <h5>Some Heading</h5>
    <img src="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
  </div>

  <div id="tab2" class='dropdown-content'>
    <h5>Heading Two</h5>
    <img src="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
  </div>

  <div id="tab3" class='dropdown-content'>
    <h5>Heading Three</h5>
    <img src="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
  </div>



  <div id="tab4" class='dropdown-content'>
    <h5>Heading Four</h5>
    <img src="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
  </div>



  <div id="tab5" class='dropdown-content'>
    <h5>Heading Five</h5>
    <img src="">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
  </div>
</div><!-- CONTENT END -->

Looks good, works in both cases, although I cannot add the 'data-id' to the 'li' because my menu is pulled from PHP. How to add 'data-id' or 'data-tab' through every 'li' in the '#secondary-menu' before the function runs? — BeauS, Aug 25 '17 at 05:28
There are many ways to do it. One would be to add the li buttons by looping over all instances of your dropdown-content and adding the data-id with a simple counter. This way you dont need to write all the copies of the li buttons. — Icewine, Aug 25 '17 at 05:53

Shiladitya · Accepted Answer · 2017-08-25T05:35:21.780

Here you go with a solution https://jsfiddle.net/vh7rajh6/

$('#secondary-menu li').mouseenter(function(){ 
  $('#' + $(this).data('tab')).slideDown();
}).mouseleave(function(){
  $('#' + $(this).data('tab')).slideUp();
});

.dropdown-content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="secondary-menu">
  <ul>
    <li data-tab="tab1">button 1</li>
    <li data-tab="tab2">button 2</li>
    <li data-tab="tab3">button 3</li>
    <li data-tab="tab4">button 4</li>
    <li data-tab="tab5">button 5</li>
  </ul>
</div>

<div id="tab1" class='dropdown-content'>
  <h5>Heading One</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab2" class='dropdown-content'>
  <h5>Heading Two</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab3" class='dropdown-content'>
  <h5>Heading Three</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab4" class='dropdown-content'>
  <h5>Heading Four</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab5" class='dropdown-content'>
  <h5>Heading Five</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

I've used mouseenter & mouseleave jQuery method along with slideUp & slideDown to provide some kind og animation.

Updated answer without data-tab or data-id Here you go with a solution https://jsfiddle.net/vh7rajh6/1/

$('#secondary-menu li').mouseenter(function(){ 
  $('#tab' + ($(this).index()+1)).slideDown();
}).mouseleave(function(){
  $('#tab' + ($(this).index()+1)).slideUp();
});

.dropdown-content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="secondary-menu">
  <ul>
    <li>button 1</li>
    <li>button 2</li>
    <li>button 3</li>
    <li>button 4</li>
    <li>button 5</li>
  </ul>
</div>

<div id="tab1" class='dropdown-content'>
  <h5>Heading One</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab2" class='dropdown-content'>
  <h5>Heading Two</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab3" class='dropdown-content'>
  <h5>Heading Three</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab4" class='dropdown-content'>
  <h5>Heading Four</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

<div id="tab5" class='dropdown-content'>
  <h5>Heading Five</h5>
  <img src="">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin non nisl eget luctus. Vivamus consectetur consectetur orci.</p>
</div>

Hope this will help you.

Looks good, works in both cases, although I cannot add the 'data-id' to the 'li' because my menu is pulled from PHP. How to add 'data-id' or 'data-tab' through every 'li' in the '#secondary-menu' before the function runs? — BeauS, Aug 25 '17 at 05:30
@BoyanStojakovic Here you go with the updated solution https://jsfiddle.net/vh7rajh6/1/ . without `data-tab` or `data-id` — Shiladitya, Aug 25 '17 at 05:33
Thanks a lot man! It would never cross my mind to do it this way. :) — BeauS, Aug 25 '17 at 05:37

jQuery menu dropdown bubbles

2 Answers2