Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
Here's what I have right now is https://codepen.io/andornagy/pen/gaGBZz
I want to add a collapse transition to the data table.
Please visit the link to see the whole example
Please Help!
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function(){
$(this).parents().next('.hide').toggle();
});
});
table {
width: 750px;
border-collapse: collapse;
margin:50px auto;
}
th {
background: #3498db;
color: white;
font-weight: bold;
}
td, th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
.labels tr td {
background-color: #2cc16a;
font-weight: bold;
color: #fff;
}
.label tr td label {
display: block;
}
[data-toggle="toggle"] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Regian</th>
<th>Q1 2010</th>
<th>Q2 2010</th>
<th>Q3 2010</th>
<th>Q4 2010</th>
</tr>
</thead>
<tbody>
<tbody class="labels">
<tr>
<td colspan="5">
<label for="accounting">Accounting</label>
<input type="checkbox" name="accounting" id="accounting" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Australia</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Central America</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
<tbody class="labels">
<tr>
<td colspan="5">
<label for="management">Management</label>
<input type="checkbox" name="management" id="management" data-toggle="toggle">
</td>
</tr>
</tbody>
<tbody class="hide">
<tr>
<td>Australia</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Central America</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Europe</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Middle East</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
</tbody>
</table>
Look at this example: using .slideToggle()
$(document).ready(function() {
$('thead').on('click', function () {
$(this).parent().next('div').slideToggle(500);
});
});
table {
width: 750px;
border-collapse: collapse;
}
thead {
width: 100%;
}
th {
background: #3498db;
color: white;
font-weight: bold;
}
td, th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
.labels tr td {
background-color: #2cc16a;
font-weight: bold;
color: #fff;
}
.label tr td label {
display: block;
}
[data-toggle="toggle"] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr><th>Accounting</th></tr>
</thead>
</table>
<div>
<table>
<tbody>
<tr>
<td>Australia</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
<tr>
<td>Central America</td>
<td>$7,685.00</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
</table>
</div>
So I was able to get the transition you wanted, but you'll have to restyle some elements. In order to manipulate the height of table elements you have to make them display block, which tends to mess up the style a bit. You should be able to get it back, just have to play with some widths and heights a little. But here is the updated codepen, I hope its what you were looking for! I wrote the JS vanilla, hope thats okay.
display: block;
Related
This is the table:
<table>
<tr>
<th>row1</th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th>row2</th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
...
</table>
I need to freeze row1 and scroll other rows. How can I do it?
Special for you https://jsfiddle.net/oLsghrt5/.
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
<div><input value="Table attribute name"></div>
</th>
<th>
<div><input value="Value"></div>
</th>
<th>
Description
<div><input value="Description"></div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>
Css
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}
Sample from duplicate:
Freeze the top row for an html table only (Fixed Table Header Scrolling)
You can fix the table head using bootstrap styling. An example of this is provided here.
You can add display: block to table and table rows.
And to freeze the first row, just mark position: sticky with top:0 to the first row and position: relative to the parent element.
Try running code snippet
table {
margin-top: 50px;
height: 50px;
overflow: auto;
display: block;
}
tbody {
position: relative
}
tbody tr {
display: block
}
tbody tr:first-child{
position: sticky;
top: 0;
background: white;
}
<table>
<tr>
<th>row1</th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th>row2</th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th>row2</th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th>row2</th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
<tr>
<th>row2</th>
<th><input type="text"></th>
<th><input type="text"></th>
<th><input type="text"></th>
</tr>
</table>
I have two nested tables. One outer table and inside every row of outer table I have inner table. My problem is when I am filtering using searchBox it filters both the tables outer and inner. I don't want to filter my inner table rows. Look at my problem I don't want my inner table to be filtered.
var $rows = $('#top_table tr');
$('#txtsearch').keyup(function () {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function () {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
tr.top_tr td {
border-bottom: 1px solid black;
min-width: 16%;
}
th {
font: bold 11px"Helvetica Neue", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
width: 16%;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 0px;
color: #4f6b72;
width: 14%;
}
td:first-child {
border-left: 1px solid #C1DAD7;
}
table {
padding: 0px;
}
#top_table {
padding: 10px;
width: 800px;
}
body {
padding: 10px;
}
.subtable {
width: 100%;
}
.body-td {
border: none;
width: 16%;
}
.collapse {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-moz-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
display: inline;
width: 100%;
float: left;
}
tr.collapse>td {
display: table;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="text" id="txtsearch" />
<table id="top_table">
<thead>
<tr>
<th>List Name</th>
<th>No. Records</th>
<th>Avail. Records</th>
<th>Creation Date</th>
<th>Last Used</th>
<th>Performance</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr accordion-toggle" data-toggle="collapse" data-parent="#top_table" href="#collapseOne">
<td>LIST NO. 1</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr >
<td colspan="6">
<table>
<tbody id="collapseOne" class="accordion-body collapse">
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr accordion-toggle" data-toggle="collapse" data-parent="#top_table" href="#collapseTwo">
<td>LIST NO. 2</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr >
<td colspan="6">
<table>
<tbody id="collapseTwo" class="accordion-body collapse">
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
<tr>
<td class="body-td" colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="6">
<table class="subtable">
<tbody>
<tr class="top_tr">
<td>LIST NO. 3</td>
<td>30000</td>
<td>3340</td>
<td>05-26-2004</td>
<td>21 days ago</td>
<td>7.3 % TRANSFER RATE</td>
</tr>
<tr>
<td colspan="6">THIS IS A BIG ROW IN A TABLE</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Everyone i got an answer which is very much shocking i just focused on what i actually want and that was just to ignore even rows of table that contains inner tables.
And the answer to this is :var rows= $("tr:odd") and then i applied filteration on these rows .:) Thanks for you precious time.
Made a table with first column fixed using this fiddle link http://jsfiddle.net/Yw679/6/ need a vertical text to left of fixed column(the text also vertical text also remains fixed like first column).
Difference between fiddle link and my expected output
1. the text 'co1' and 'co2' is vertically aligned
2. the vertical text should be fixed like the first column is.
fiddle code
1.HTML:
<div style="width:400px">
<table class="table1">
<tr>
<thead>
<th> make me fixed</th>
</thead>
</tr>
<tr>
<td>value number 1</td>
</tr>
</table>
<div class="table2">
<table>
<tr>
<thead>
<th>make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</th>
</thead>
</tr>
<tr>
<td> value number 2 </td>
</tr>
</table>
</div>
</div>
2.CSS
th,td {
padding: 5px;
border: 1px solid #000;
white-space: nowrap;
}
.table1 {
float: left;
}
.table2 {
width: 200px;
overflow: auto;
}
Here's the expected output
Something like this?
th,td {
padding: 5px;
border: 1px solid #000;
white-space: nowrap;
}
.table1 {
float: left;
}
.table2 {
width: 200px;
overflow: auto;
}
.text-container {
display: inline;
float: left;
width: 1rem;
}
.text {
text-align: center;
width: 0;
font-size: 10px;
word-wrap: break-word;
line-height: .5rem;
padding: 2px;
}
<div class="text-container">
<div class="text">CO1</div>
<div class="text">CO2</div>
</div>
<div style="width:400px">
<table class="table1">
<tr>
<thead>
<th> make me fixed</th>
</thead>
</tr>
<tr>
<td>value number 1</td>
</tr>
</table>
<div class="table2">
<table>
<tr>
<thead>
<th>make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</th>
</thead>
</tr>
<tr>
<td> value number 2 </td>
</tr>
</table>
</div>
</div>
I am trying to build this excel table with html and css. The problem i kept facing is the when i try to add different number of columns for different rows, It surpasses the border limit and extends by itself. My intent is to replicate the contents of the picture.
table
{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border: 3px solid #151515;
}
th, td
{
border: 1px solid #151515;
padding: 12px;
text-align: center;
}
th
{
font-weight: bold;
}
tfoot tr:nth-child(2)
{
font-weight: normal;
height: 100px;
}
.colored td
{
background-color: #aaaaaa;
}
<table>
<tbody>
<tr>
<th colspan="4" class="title">PURCHASE DETAILS</th>
</tr>
<tr class="colored">
<th rowspan="2">BUDGET CODE:</th>
<td>Account Code</td>
<td>Cost Center</td>
<td>Project Code</td>
<td>DEA</td>
</tr>
<tr>
<td>5458</td>
<td>22222</td>
<td>3658954</td>
<td>95874</td>
</tr>
<tr>
<th>PO Number:</th>
<td>PO/SC/2010/33</td>
<th>Supplier:</th>
<td>STORM TECH</td>
</tr>
<tr>
<th>SOF:</th>
<td>00254584</td>
<th>Value (Purchase Price USD):</th>
<td><b>1,084.89</b></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Plan After Award Ends:</th>
<td colspan="2">Carry Over</td>
</tr>
</tfoot>
</table>
If anybody can assist please.
Not sure table layout is the best choice here, but it can be done. Just create more cells per row and span the cells you need over 2 or 3 "cells"
table
{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
border: 3px solid #151515;
}
th, td
{
border: 1px solid #151515;
padding: 12px;
text-align: center;
}
th
{
font-weight: bold;
}
tfoot tr:nth-child(2)
{
font-weight: normal;
height: 100px;
}
.colored td
{
background-color: #aaaaaa;
}
<table>
<tbody>
<tr>
<th colspan="8" class="title">PURCHASE DETAILS</th>
</tr>
<tr class="colored">
<th rowspan="2">BUDGET CODE:</th>
<td colspan="2">Account Code</td>
<td colspan="2">Cost Center</td>
<td colspan="2">Project Code</td>
<td>DEA</td>
</tr>
<tr>
<td colspan="2">5458</td>
<td colspan="2">22222</td>
<td colspan="2">3658954</td>
<td>95874</td>
</tr>
<tr>
<th>PO Number:</th>
<td colspan="3">PO/SC/2010/33</td>
<th colspan="2">Supplier:</th>
<td colspan="2">STORM TECH</td>
</tr>
<tr>
<th>SOF:</th>
<td colspan="3">00254584</td>
<th colspan="2">Value (Purchase Price USD):</th>
<td colspan="2"><b>1,084.89</b></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Plan After Award Ends:</th>
<td colspan="6">Carry Over</td>
</tr>
</tfoot>
</table>
I have a problem with my code. The goal is to have a text that appear when a user click on the link. But I want also that when he clicks on the link the only text that show is the text underneath and not in all the cells. Can someone has a clue on what I did wrong? I will probable add other links (more than 2) and I want to be sure that it will work every time.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$('.cat' + $(this).attr('data-prod-cat')).toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>
You have just to go up to the parent table using closest('table') function and then select all the text's related to the current clicked .toggler using .find('[class^="cat"]') like :
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
Hope this helps.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td>
<a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>
Based on your code, I guess you are trying to use data-prod-cat attribute to know which block needs to appear.
But in both of your block you have data-prod-cat="1" which means that you will activate both blocks on every action.
Try changing the 2nd block attribute to :
data-prod-cat="2"
You'll also need to update the css class in your other <tr>
You need to get the parent of <a> first then get that parent which is <tr>. Finally filter on cat1 class to toggle all siblings containing the cat1 class.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).parent().parent().siblings().filter(".cat1").toggle();
});
});
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).parent().parent().siblings().filter(".cat1").toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>