CODEWITHSUNDEEP
javascriptjquerycss
Andre
Andre

Reputation: 839

Links to show and hide tables

I am trying to have links that by clicking on it will show and hide the table below it, once I land on the page all I would like to see are links. I trying with this sample code, but not getting anywhere, any suggestions?

<html>
<title>hise show</title>
<head>
<script>jquery link here</script>

<script type="text/javascript">

$(document).ready(function() {
$('.act table').hide();
$('.see').click(function() {
$(this).parents('table').find('td').slideToggle("slow");
});

});

</script>

</head>
<body>

<br>
<p class="see" style="font-size:15px;">Table 1</p>

<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="1">AA</th>
<th class="1">AA</th>
</tr>
</thead>
<tr>
<td class="1">A</td>
<td class="1">A</td>
</tr>
</table>
<br>

<br>
<p class="see" style="font-size:15px;">Table 2</p>

<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="2">BB</th>
<th class="2">BB</th>
</tr>
</thead>
<tr>
<td class="2">BB</td>
<td class="2">BB</td>
</tr>
</table>
<br>

<br>
<p class="see" style="font-size:15px;">Table 3</p>

<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="3">CC</th>
<th class="3">CC</th>
</tr>
</thead>
<tr>
<td class="3">CC</td>
<td class="3">CC</td>
</tr>
</table>
<br>

</body>
</html>

Thank you!

Upvotes: 2

Views: 42

Answers (3)

Aroniaina
Aroniaina

Reputation: 1252

Try this, run the snippet

 
<!DOCTYPE html>
<html>
    <head>
        <title>The code</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>        
    <body>
<br>
<p class="see" style="font-size:15px;">Table 1</p>

<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="1">AA</th>
<th class="1">AA</th>
</tr>
</thead>
<tr>
<td class="1">A</td>
<td class="1">A</td>
</tr>
</table>
<br>

<br>
<p class="see" style="font-size:15px;">Table 2</p>

<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="2">BB</th>
<th class="2">BB</th>
</tr>
</thead>
<tr>
<td class="2">BB</td>
<td class="2">BB</td>
</tr>
</table>
<br>

<br>
<p class="see" style="font-size:15px;">Table 3</p>

<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="3">CC</th>
<th class="3">CC</th>
</tr>
</thead>
<tr>
<td class="3">CC</td>
<td class="3">CC</td>
</tr>
</table>
<br>
    
<script>
$(document).ready(function(){
    $(".act").hide();
    $(".see").click(function(){
        $(this).next().toggle();
    });
});
</script>
    </body>
</html>

Upvotes: 0

user1012181
user1012181

Reputation: 8726

$('#showTable').click(function(){
    $('#mytable').toggleClass('hidden');
    if($('#showTable').text()=='Show Table') $('#showTable').text('Hide Table');
    else $('#showTable').text('Show Table');
});
table tr td{ border: 1px solid #383838; }
table { border: 1px solid #383838; }
.hidden{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a href="#" id="showTable">Show Table</a>

<table class="hidden" id="mytable">
    <tr>
        <td>
            Sample Table
        </td>
        <td>
            Sample Table 
        </td>
    </tr>
    <tr>
        <td>
            Sample Table
        </td>
        <td>
            Sample Table 
        </td>
    </tr>
</table>

Another quick solution for your approach: Check this code: http://jsfiddle.net/vxt5h9o7/

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

You have just to change your selector to :

$(this).next('table').slideToggle("slow");

Using JQuery next() function your code will work.

$('.act table').hide();

$('.see').click(function() {
	$(this).next('table').slideToggle("slow");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<p class="see" style="font-size:15px;">Table 1</p>

<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="1">AA</th>
<th class="1">AA</th>
</tr>
</thead>
<tr>
<td class="1">A</td>
<td class="1">A</td>
</tr>
</table>
<br>

<br>
<p class="see" style="font-size:15px;">Table 2</p>

<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="2">BB</th>
<th class="2">BB</th>
</tr>
</thead>
<tr>
<td class="2">BB</td>
<td class="2">BB</td>
</tr>
</table>
<br>

<br>
<p class="see" style="font-size:15px;">Table 3</p>

<table class="act" border="0" cellpadding="0" cellspacing="1">
<thead>
<tr>
<th class="3">CC</th>
<th class="3">CC</th>
</tr>
</thead>
<tr>
<td class="3">CC</td>
<td class="3">CC</td>
</tr>
</table>
<br>

Upvotes: 1

Related Questions