Home/ Questions/Q 8540545
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T11:37:21+00:00

i’m trying to use jQuery slideToggle() function to show and hide a table with

  • 0

i’m trying to use jQuery slideToggle() function to show and hide a table with some details.
the idea is that when i click on a table’s title row, i get the details below.

i’m using a code from w3 school, this is the original:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle

the problem is that the sliding div overlaps the already existing table headers.
look at the results of running the code here:
http://62.219.127.85/sites/isell/tests/123123.php

I use the onmouseover() in order to get the header I currently going to click.
here’s my code (only an example I wrote, not the real one)

can anyone please find what’s wrong here?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<style type="text/css">
#hideme,#triggerSlide
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#hideme
{
padding:50px;
display:none;
}
</style>

<body>
<div id="triggerSlide" class="adID" onmouseover="storeAdID(this);" 
style="padding:2px;">
    <table border="1">
        <tr>
            <th colspan="2">asdasd</th>
        </tr>
    </table>
</div>


<div class="adID" id="hideme">
    <table border="1">
        <tr>
            <td>123</td>
            <td>145</td>
        </tr>
        <tr>
            <td>987</td>
            <td>951</td>
        </tr>
    </table>
</div>
</body>

<script> 
    var adID;

    function storeAdID(obj) {
        adID = obj.className;
    }
</script>

<script>
$(document).ready(function(){
  $("#triggerSlide").click(function(){
    $("."+adID).slideToggle("slow");
  });
});
   </script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have two elements with the class “adID” and you are hiding them both.

    Here is a JSFiddle: http://jsfiddle.net/mmcglynn/j6z73/

    I think your want something closer to this:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<style type="text/css">
#hideme,#triggerSlide
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#hideme
{
padding:50px;
display:none;
}
</style>

<body>
<div id="triggerSlide" style="padding:2px;cursor:pointer">
    <table border="1">
        <tr>
            <th colspan="2">asdasd</th>
        </tr>
    </table>
</div>


<div class="adID" id="hideme">
    <table border="1">
        <tr>
            <td>123</td>
            <td>145</td>
        </tr>
        <tr>
            <td>987</td>
            <td>951</td>
        </tr>
    </table>
</div>
</body>

<script>
$(document).ready(function(){
  $("#triggerSlide").click(function(){
    $(".adID").slideToggle("slow");
  });
});
</script>
    • 0