Extending tabs independently of each other in jQuery
I have 3 tables; when you click on the corner of one, all 3 expand. I would like them to expand independently. How can i do this?
Here's my code:
$(document).ready(function () {
$(".flip").click(function () {
$(".panel").slideToggle("fast");
});
});
table {
margin-bottom: 1em;
border-collapse: collapse;
border-spacing: 0;
background-color: #fff;
}
table th, table td {
border: 1px solid #ccc;
padding: 0.5em;
}
thead tr th {
background-color: #00745e;
color: white;
font-size: 14px;
}
table tr th img {
float: right;
}
table td {
font-size: 12px;
}
.panel {
display: none;
}
.flip {
}
.toggle {
display: block;
float: right;
background-image: url('../EPL-Static/images/soccer.png');
height: 20px;
width: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-grid grid_item">
<thead>
<tr>
<th colspan="9">Chelsea vs Manchester United <a href="#" class="toggle flip"></a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">EPL1</td>
<td colspan="3">NGN</td>
<td colspan="3">Tick</td>
</tr>
<tr>
<td colspan="9" class="panel">
<p>expand info</p>
</td>
</tr>
</tbody>
</table>
<!-- Box 2 -->
<table class="table-grid grid_item">
<thead>
<tr>
<th colspan="9">Arsenal vs Tottenham Hospur <a href="#" class="toggle flip"></a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">EPL2</td>
<td colspan="3">NGN</td>
<td colspan="3">Tick</td>
</tr>
<tr>
<td colspan="9" class="panel">
<p>expand info</p>
</td>
</tr>
</tbody>
</table>
<!-- Box 3 -->
<table class="table-grid grid_item">
<thead>
<tr>
<th colspan="9">Liverpool vs Sunderland United <a href="#" class="toggle flip"></a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">EPL1</td>
<td colspan="3">NGN</td>
<td colspan="3">Tick</td>
</tr>
<tr>
<td colspan="9" class="panel">
<spam>expand info</span>
</td>
</tr>
</tbody>
</table>
+3
source to share
1 answer
You need to find .panel
in the context of the current table. So first you need to find the parent table:
$(".flip").click(function () {
$(this).closest("table").find(".panel").slideToggle("fast");
});
Demo: http://jsfiddle.net/vqm0aL9q/
+3
source to share