CODEWITHSUNDEEP
jqueryhtmlappend
eve_mf
eve_mf

Reputation: 825

displaying content of a class inside another div

I'm trying to display some content of a <li> element if it has the class .submenus within a div with id #displayBox.

It's doing it more or less, but with one issue, it does it once, and then, it doesn't happen anymore :S

What am I missing??

https://jsfiddle.net/511j93tn/1/

html:

<div class="wrap">
    <div class="left col-md-8 col-sm-8">
        <ul id="mainNav">
            <li class="submenus">
                <a href="#">Home</a>
                <div class="info">Some stuff about Home</div>
            </li>
            <li>
                <a href="#">Location</a>  
            </li>
            <li class="submenus">
                <a href="#">Services</a>
                <div class="info">Some stuff about Services</div>
            </li>
            <li class="submenus">
                <a href="#">Merchandising</a>
                <div class="info">Some stuff about Merchandising</div>
            </li>
        </ul>
    </div>
    <div class="right col-md-4 col-sm-4">Social icons here</div>
    <div id="displayBox" class="col-md-12 col-sm-12"></div>
</div>

css:

 #mainNav li{
        display:inline-block;
    }
    .left, .right {
        width:auto:
    }
    .info,
    #displayBox{
        display:none;
    }

    #displayBox {
        border:1px solid red;
        height:30px;
    }

js:

$(".submenus").hover(function() {
      $info = $(this).find(".info");
    $("#displayBox").css("display", "block");
    $("#displayBox").html(($info).css("display", "block")).html();
    }, function() {
      $info = $(this).find(".info");
    $("#displayBox").css("display", "none");
   });

And I think it's too long for what I do. Right? It must be a shorter way to achieve this?

Thank you!

Upvotes: 0

Views: 110

Answers (2)

M Umair
M Umair

Reputation: 34

this jquery code will help you . try this

$(".submenus").hover(function() {
  $info = $(this).find(".info");
  $("#displayBox").css("display", "block");
  $("#displayBox").html(($info).html());
}, function() {
  $info = $(this).find(".info");
  $('#displayBox').css("display", "none");
});

Upvotes: 0

The fourth bird
The fourth bird

Reputation: 163207

Maybe this change in setting the .html() for the $("#displayBox") is what you are looking for: https://jsfiddle.net/511j93tn/5/

Upvotes: 1

Related Questions