Make content visible only after using jquery to copy html content

Sarah cartenz Published at Dev

Sarah cartenz

I have something like this:

$(".mini-circle").hover(function() {
  $("#circle").html($(this).html())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button class="mini-circle" style="background-color:#A9A9A9">circle
  <ul visibility: hidden>
    <li><b>Indecision:</b> Gray prefers to sit in the middle, not making a decision either way, sitting on the fence.</li>
    <li><b>Detached:</b> being non-emotional, gray can appear indifferent, uncaring, cold and aloof.</li>
    <li><b>Unemotional:</b> gray can appear neutral, disinterested, objective or impartial.</li>
  </ul>
</button>

<div class="row">
  <div id="circle" style="background-color:red" align="center">
  </div>
</div>

Notice that the <ul> is not visible. I use:

to copy that <ul> html section into the lower div. However nothing is visible because it is copied as it is.

$($(this).attr('visibility', 'visible')).html()

but it is no use. I also tried many other things but the branching is confusing. Do you have any idea how I can tackle this?

Simply Me

Got this working, if this is what you expect (this is what I understand). You need the <ul> to become visible on button hover.

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $(".mini-circle").hover(function() {
 	  $("#circle").html($(this).html());
          $("ul").css("visibility","visible");
      });
    });
  </script>
</head>

<body>


  <input type="button" class="mini-circle" style="background-color:#A9A9A9" value="circle">
  <ul style="visibility:hidden">
    <li><b>Indecision:</b> Gray prefers to sit in the middle, not making a decision either way, sitting on the fence.</li>
    <li><b>Detached:</b> being non-emotional, gray can appear indifferent, uncaring, cold and aloof.</li>
    <li><b>Unemotional:</b> gray can appear neutral, disinterested, objective or impartial.</li>
  </ul>

  <div class="row">
    <div id="circle" style="background-color:red" align="center">
    </div>
  </div>
</body>

</html>

Collected from the Internet

Please contact [email protected] to delete if infringement.