Lucafraser February 2016

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>
        <t        

Answers


Karl Dawson February 2016

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< 


Chris February 2016

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> 

Post Status

Asked in February 2016
Viewed 3,864 times
Voted 6
Answered 2 times

Search




Leave an answer