CODEWITHSUNDEEP
javascriptjqueryhtmlcss
lucafj2j282j
lucafj2j282j

Reputation: 891

Why does my jQuery slidedown not work in my table?

I'm trying to get the slider to work but it simply won't. It works when I'm not using a table but for my website I need a table where I can display the members. What's wrong with my code? The information has to below the name, not next to it.

<!DOCTYPE html>
<html>
<head>
<title>Bestuur</title>
<link rel="icon" href="images/favicon.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideToggle("slow");
        });
    });
</script>
<style type="text/css">
    body {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    }
    table {
        border-collapse: collapse;
    }

    th, td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid #e7e7e7;
        background-color: #f3f3f3;
    }

    li {
        float: left;
    }

    li a {
        display: block;
        color: #666;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover:not(.active) {
        background-color: #ddd;
    }

    li a.active {
        color: white;
        background-color: #42a5f5;
    }
    #panel, #flip {
        padding: 5px;
    }

    #panel {
        display: none;
    }
</style>
</head>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li><a href="bestuurWijzigen.php">Bestuur wijzigen</a></li>
<li><a href="bestuurToevoegen.php">Bestuur toevoegen</a></li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">

    <tbody>

    <tr>
        <th>Naam</th>
        <th>Functie</th>
    </tr>

    <tr>

        <td><div id="flip">Pieter Schreurs</td>
        <td>
            <label for="pieter">Secretaris</label>
        </div></td>

        <td><div id="panel">Hidden information</div></td>

    </tr>

    <tr>
        <td>Wessel Oblink</td>
        <td>
            <label for="wessel">Penningmeester</label>
        </td>
    </tr>

    <tr>
        <td>Luca Fraser</td>
        <td>
            <label for="luca">Voorzitter</label>
        </td>
    </tr>

    </tbody>

</table>
</div>
</html>

Upvotes: 4

Views: 440

Answers (2)

Chris
Chris

Reputation: 59501

There are a few tags that you never close. Fix those, then either move your #flip inside a td or remove that div and set the parent tr to have that ID.

I changed implementation so that "Functie" doesn't move.

Demo

 $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideToggle("slow");
        });
    });
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
table {
    border-collapse: collapse;
    table-layout: fixed;
}

th, td {
    width: 150px;
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li {
    float: left;
}

li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ddd;
}

li a.active {
    color: white;
    background-color: #42a5f5;
}
#panel, #flip {
    padding: 5px;
}

#panel {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li><a href="bestuurWijzigen.php">Bestuur wijzigen</a></li>
<li><a href="bestuurToevoegen.php">Bestuur toevoegen</a></li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
    <tbody>
      <tr>
        <th>Naam</th>
        <th>Functie</th>
      </tr>
      <tr id="flip">
         <td>Pieter Schreurs<div id="panel">Hidden information</div></td>
         <td>
           <label for="pieter">Secretaris</label>
         </td>
      </tr>
      <tr>
        <td>Wessel Oblink</td>
        <td>
            <label for="wessel">Penningmeester</label>
        </td>
      </tr>
      <tr>
        <td>Luca Fraser</td>
        <td>
            <label for="luca">Voorzitter</label>
        </td>
      </tr>
    </tbody>
</table>
</div>

Upvotes: 0

Karl Dawson
Karl Dawson

Reputation: 977

I tidied up your markup - divs and tds closing incorrectly and moved the #panel. Is this what you're after?

$(document).ready(function() {
  $("#flip").click(function() {
    $("#panel").slideToggle("slow");
  });
});
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

table {
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
}

li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #42a5f5;
}

#panel,
#flip {
  padding: 5px;
}

#panel {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="horizontal gray">
  <li><a class="active" href="index.php">Bestuur</a></li>
  <li><a href="bestuurWijzigen.php">Bestuur wijzigen</a></li>
  <li><a href="bestuurToevoegen.php">Bestuur toevoegen</a></li>
</ul>
<div>
  <table class="table" border="1" frame="void" rules="rows">
    <tbody>
      <tr>
        <th>Naam</th>
        <th>Functie</th>
      </tr>
      <tr>
        <td width="200">
          <div id="flip">Pieter Schreurs</div>
          <div id="panel">Hidden information</div>
        </td>
        <td>
          <label for="pieter">Secretaris</label>
        </td>
      </tr>
      <tr>
        <td>Wessel Oblink</td>
        <td>
          <label for="wessel">Penningmeester</label>
        </td>
      </tr>
      <tr>
        <td>Luca Fraser</td>
        <td>
          <label for="luca">Voorzitter</label>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 3

Related Questions