Slide Panel onClick

Question

I want make a slider panel when hover table tr row and back to hidden on hover out. I've been tried but i can't make it. I would like https://sb.horizonservers.net/index.php?p=banlist page. When its click on the row show more information about ban.

html

$(document).ready(function(){
  $(".tborder tr td").hover(function(){
    $(this).next().find(".slidepanel").slideToggle("slow");
  });
});

.tborder{background:#ccc;border-collapse:collapse;}
.tborder tr:first-child td { background:black;color:white}
.tborder tr td {padding:10px}
.tborder tr td:nth-child(1) {width:18%;}
.tborder tr td:nth-child(2) {width:23%;}
.tborder tr td:nth-child(3) {width:20%;}
.tborder tr td:nth-child(4) {width:20%;}
.tborder tr td:nth-child(5) {width:20%;}

.slidepanel {background:red;color:white;}

<table class="tborder">
<tr>
  <td>Date</td>
  <td>Name</td>
  <td>Baned By</td>
  <td>Reason</td>
  <td>Time</td>
</tr>

		<tr>
      <td>07/20/2017 18:07</td>
      <td>Globb</td>
      <td>Rise</td>
      <td>Bad Language</td>
      <td>2 hours 23 minutes</td>
    </tr>
        <!-- SLIDE PANEL -->
        <tr class="slidepanel" style="display:none">
          <td colspan="5">More Info Example</td>
        </tr>
        <!-- SLIDE PANEL END -->
    
    
    <tr>
      <td>07/20/2017 18:00</td>
      <td>Pele</td>
      <td>Freeman</td>
      <td>Hack</td>
      <td>7 days</td>
    </tr>
        <!-- SLIDE PANEL -->
        <tr class="slidepanel" style="display:none">
          <td colspan="5">More Info Example</td>
        </tr>
        <!-- SLIDE PANEL END -->
        
</table>










<br><br><br>
When hover on row 

<table class="tborder want">
<tr>
  <td>Date</td>
  <td>Name</td>
  <td>Baned By</td>
  <td>Reason</td>
  <td>Time</td>
</tr>

		<tr>
      <td>07/20/2017 18:07</td>
      <td>Globb</td>
      <td>Rise</td>
      <td>Bad Language</td>
      <td>2 hours 23 minutes</td>
    </tr>
        <!-- SLIDE PANEL -->
        <tr class="slidepanel">
          <td colspan="5">More Info Example</td>
        </tr>
        <!-- SLIDE PANEL END -->
    
    
    <tr>
      <td>07/20/2017 18:00</td>
      <td>Pele</td>
      <td>Freeman</td>
      <td>Hack</td>
      <td>7 days</td>
    </tr>
        <!-- SLIDE PANEL -->
        <tr class="slidepanel" style="display:none">
          <td colspan="5">More Info Example</td>
        </tr>
        <!-- SLIDE PANEL END -->
        
</table>

Thanks in advance.

Answer 1

You can make it work with your current HTML and CSS. In your code, you only need to modify the CSS selector to only target regular table rows, and you don't need to use .find():

$(document).ready(function(){
  $(".tborder tr:not(.slidepanel)").hover(function(){
    $(this).next(".slidepanel").slideToggle("slow");
  });
});

However, you will not get the sliding motion that you might want because the height of <tr> can't be animated. To have the slide animation, you can wrap your .slidepanel content inside a div and animate that div instead. Something like this:

$(document).ready(function() {
  $(".tborder tr:not(.slidepanel)").hover(function() {
    $(this).next(".slidepanel").find("div").slideToggle();
  });
});

.tborder {
  background: #ccc;
  border-collapse: collapse;
}

.tborder th {
  background: black;
  color: white
}

.tborder th,
.tborder tr:not(.slidepanel) td {
  padding: 10px
}

.tborder th:nth-child(1) {width: 18%;}
.tborder th:nth-child(2) {width: 23%;}
.tborder th:nth-child(3) {width: 20%;}
.tborder th:nth-child(4) {width: 20%;}
.tborder th:nth-child(5) {width: 20%;}

.slidepanel div {
  display: none;
  background: red;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tborder">
  <tr>
    <th>Date</th>
    <th>Name</th>
    <th>Baned By</th>
    <th>Reason</th>
    <th>Time</th>
  </tr>

  <tr>
    <td>07/20/2017 18:07</td>
    <td>Globb</td>
    <td>Rise</td>
    <td>Bad Language</td>
    <td>2 hours 23 minutes</td>
  </tr>
  <!-- SLIDE PANEL -->
  <tr class="slidepanel">
    <td colspan="5">
      <div>
        More Info Example
      </div>
    </td>
  </tr>
  <!-- SLIDE PANEL END -->


  <tr>
    <td>07/20/2017 18:00</td>
    <td>Pele</td>
    <td>Freeman</td>
    <td>Hack</td>
    <td>7 days</td>
  </tr>
  <!-- SLIDE PANEL -->
  <tr class="slidepanel">
    <td colspan="5">
      <div>
        More Info Example
      </div>
    </td>
  </tr>
  <!-- SLIDE PANEL END -->

</table>

Hope that helps.