I am completely new to JavaScript, so, sorry for asking this simple question. The point is that there have been numerous similar questions here and on other platforms. I've tried all solutions provided but neither of them worked in my case. I assume that this is because of my CSS, otherwise I do not know what is the reason. I tried different methods: insertRow, clone etc. neither of them worked.
The point is that my program needs to add row or column to the table on click on the buttons. Right button should add column to the right of the table, bottom button should add row to the bottom of the table.
// append row to the HTML table
function appendRow() {
var tbl = document.getElementById('my-table'), // table reference
row = tbl.insertRow(tbl.rows.length), // append table row
i;
// insert table cells to the new row
for (i = 0; i < tbl.rows[0].cells.length; i++) {
createCell(row.insertCell(i), i, 'row');
}
};
// create DIV element and append to the table cell
function createCell(cell) {
var div = document.createElement('div'), // create DIV element
cell.appendChild(div); // append DIV to the table cell
};
// append column to the HTML table
function appendColumn() {
var tbl = document.getElementById('my-table'), // table reference
i;
// open loop for each row and append cell
for (i = 0; i < tbl.rows.length; i++) {
createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
}
};
#canvas {
align-content: center;
height: 1000px;
}
#my-table {
margin: 0 -2px -2px 0;
border: #FFF;
border: 1px solid rgb(72, 170, 230);
display: inline-block;
}
tr {
background: rgb(72, 170, 230);
}
td {
width: 50px;
height: 50px;
}
.add {
height: 52px;
width: 52px;
background: rgb(243, 165, 0);
cursor: pointer;
color: #FFF;
text-align: center;
font-family: 'Open Sans', sans-serif;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
}
#addColumn {
display: inline-block;
vertical-align: top;
margin: 2px 0 0 0;
}
.add:hover {
background: rgb(246, 192, 82);
}
#addColumnChild {
line-height: 50px;
}
#addRow {
vertical-align: bottom;
margin: 0 0 0 2px;
}
#addRowChild {
line-height: 50px;
}
.del {
height: 52px;
width: 52px;
background: rgb(178, 0, 0);
cursor: pointer;
color: #FFF;
text-align: center;
font-family: 'Open Sans', sans-serif;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
}
#delColumn {
display: inline-block;
vertical-align: top;
margin: 2px 0 0 0;
}
.del:hover {
background: rgb(202, 76, 73);
}
#delColumnChild {
line-height: 50px;
}
#delRow {
vertical-align: left;
margin: 0 0 0 2px;
}
#delRowChild {
line-height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Test task 1</title>
<body>
<!-- <div id="delColumn" class="del" onclick="appendColumn">
<div id="addColumnChild"><b>–</b></div>
</div>
<div id="delRow" class="del" onclick="appendRow()">
<div id="delRowChild"><b>–</b></div>
</div>-->
<table id="my-table">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div id="addColumn" class="add" onclick="appendColumn">
<div id="addColumnChild"><b>+</b></div>
</div>
<div id="addRow" class="add" onclick="appendRow()">
<div id="addRowChild"><b>+</b></div>
</div>
How to make buttons work and actually add rows and columns?
Here you go with a solution (using jQuery) https://jsfiddle.net/gmzqe5kw/11/
$('#addColumnChild').click(function(){
$('#my-table tr').each(function(){
$(this).append(`<td></td>`);
});
});
$('#addRowChild').click(function(){
$('#my-table tbody').append(`<tr>${$('#default-row').html()}</tr>`);
});
#canvas {
align-content: center;
height: 1000px;
}
#my-table {
margin: 0 -2px -2px 0;
border: #FFF;
border: 1px solid rgb(72, 170, 230);
display: inline-block;
}
tr {
background: rgb(72, 170, 230);
}
td {
width: 50px;
height: 50px;
}
.add {
height: 52px;
width: 52px;
background: rgb(243, 165, 0);
cursor: pointer;
color: #FFF;
text-align: center;
font-family: 'Open Sans', sans-serif;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
}
#addColumn {
display: inline-block;
vertical-align: top;
margin: 2px 0 0 0;
}
.add:hover {
background: rgb(246, 192, 82);
}
#addColumnChild {
line-height: 50px;
}
#addRow {
vertical-align: bottom;
margin: 0 0 0 2px;
}
#addRowChild {
line-height: 50px;
}
.del {
height: 52px;
width: 52px;
background: rgb(178, 0, 0);
cursor: pointer;
color: #FFF;
text-align: center;
font-family: 'Open Sans', sans-serif;
transition-property: background;
transition-duration: 1s;
transition-timing-function: linear;
}
#delColumn {
display: inline-block;
vertical-align: top;
margin: 2px 0 0 0;
}
.del:hover {
background: rgb(202, 76, 73);
}
#delColumnChild {
line-height: 50px;
}
#delRow {
vertical-align: left;
margin: 0 0 0 2px;
}
#delRowChild {
line-height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my-table">
<tr id="default-row">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div id="addColumn" class="add">
<div id="addColumnChild"><b>+</b></div>
</div>
<div id="addRow" class="add">
<div id="addRowChild"><b>+</b></div>
</div>
Hope this will help you.
Use jQuery events and selectors:
As an example, to add a row, use general solution is of this form:
$(".some_selector").click(function () {
$("table.your_class").append("<tr> <td>col1</td> <td>col2</td> </tr>");
});
To add columns use:
similarly to add columns:
$(".some_selector").click(function () {
// Loop over the rows of the table and append the td tag
$("table.your_class tr").append("<td>col1</td>");
});
Related
I am having trouble getting the horizontal scroll bar to show up. I can still scroll horizontally with the track pad and everything is formatted correctly but the bar itself is not showing up so that you can use it to move horizontally on the table with the mouse. Any help figuring this out would be greatly appreciated, thank you!
HTML - Through React Framework
{/* Order */}
<div className ="order">
<table>
<tbody>
<tr>
<td>Id</td>
<td>Farm</td>
<td>Field</td>
<td>W/O</td>
<td>Job</td>
<td>APA</td>
<td>Acres</td>
<td>Status</td>
<td>Solution</td>
<td>Date Ordered</td>
<td>Date Sampled</td>
<td>Date Billed</td>
<td>Price</td>
<td>Years Billed</td>
<td>Split 1</td>
<td>Split 2</td>
</tr>
{orders.map((order, num) => {
let splitOne = ""
let splitTwo = ""
if(order.split_one_name.length > 1){
splitOne = `${order.split_one_name} - ${order.split_one_share}`
}
if(order.split_two_name.length > 1){
splitTwo = `${order.split_two_name} - ${order.split_two_share}`
}
return (
<tr key={order.id}>
<td>{order.id}</td>
<td>{order.farm}</td>
<td>{order.field}</td>
<td>{startInputMode(order.wo_num, num, 'wo_num')}</td>
<td>{startInputMode(order.job_num, num, 'job_num')}</td>
<td>{order.firstname + " " + order.lastname}</td>
<td>{order.acres}</td>
<td>{startInputMode(order.status, num, 'status')}</td>
<td>{order.solution}</td>
<td>{order.date_ordered.slice(0,10)}</td>
<td>{startInputMode(order.date_sampled, num, 'date_sampled')}</td>
<td>{startInputMode(order.date_billed, num, "date_billed")}</td>
<td>{order.price}</td>
<td>{order.years_billed}</td>
<td>{splitOne}</td>
<td>{splitTwo}</td>
</tr>)
})}
</tbody>
</table>
</div>
CSS
table {
font-family: arial, sans-serif;
border-collapse: collapse;
align-self: center;
justify-self: center;
width: 100%;
overflow: scroll;
white-space: nowrap;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
min-width: 100px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.order {
display: block;
grid-area: orders;
height: 100%;
width: 100%;
align-self: center;
justify-self: center;
max-height: 520px;
overflow: scroll;
justify-content: center;
align-content: center;
}
::-webkit-scrollbar {
width: 5px;
height: 0px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
In your table css, change overflow: scroll to overflow: auto.
Then remove height: 0px from ::-webkit-scrollbar.
::-webkit-scrollbar Docs
I made filter based on selection in input. It shows only items with same category on click. On desktop version when I click for example "Others" it will list only tr with Others in category but when I resize on mobile version and press filter, so nothing happen. All tr's are still showing. Really don't have idea what is difference between mobile and desktop version when JS is working with same code in both views.
highlightRows = () => {
let oddRows = document.querySelectorAll('tbody > tr.show')
oddRows.forEach((row, index)=> {
if (index % 2 == 0) {
row.style.background = '#f1f1f1'
} else {
row.style.background = '#fff'
}
})
}
const filterOptions = () => {
const option = document.querySelector("#filter").value;
const selection = option.replace('&', '')
const rows = document.querySelectorAll("#body1 > tr");
console.log(rows.length);
rows.forEach(row => {
let td = row.querySelector("td:last-child");
let filter = td.innerText.replace('&', '');
if (filter === selection) {
row.className = 'show'
} else {
row.className = 'hidden'
}
});
highlightRows()
};
document.getElementById("filter").addEventListener("change", filterOptions);
.table-filters {
display: flex;
align-items: center;
justify-content: center;
margin: 2em;
text-align: center;
}
.table-filters a {
color: #222;
font-size: 16px;
font-weight: 500;
margin-right: 1em;
display: inline-block;
}
.table-filters a:hover {
text-decoration: none;
}
.table-filters select {
background: #fff;
font-size: 16px;
font-weight: 500;
width: 12em;
height: 2.5em;
}
table.stats {
background: #fff;
width: 100%;
table-layout: fixed;
border-radius: 6px;
}
tbody tr.show {
display: table-row;
}
tbody tr.hidden {
display: none;
}
table.vypis {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table.vypis > caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table.vypis > tr.vypis-riadok {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table.vypis th,
table.vypis td {
padding: .625em;
text-align: center;
}
table.vypis th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 800px) {
table.vypis {
border: 0;
}
table.vypis > caption {
font-size: 1.3em;
}
table.vypis > thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table.vypis tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table.vypis td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table.vypis td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table.vypis td:last-child {
border-bottom: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-filters">
<select id="filter">
<option disabled selected value="none">Categories</option>
<option>Hobby</option>
<option>Others</option>
</select>
</div>
<table class="vypis">
<caption>Pohyby na účte</caption>
<thead>
<tr>
<th scope="col">Refer</th>
<th scope="col">Date</th>
<th scope="col">Price</th>
<th scope="col">Category</th>
</tr>
</thead>
<tbody id="body1">
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Others</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Hobby</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Others</td>
</tr>
Your code works well, but the problem is with rule display: block, which is in the media query. in the table.vypis tr selector. This rule overrides another block hiding rule. You need to remove display: block out of table.vypis tr.
#media screen and (max-width: 800px) {
...
table.vypis tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
...
}
Or a second solution:
Add! !important to rule display: none, selector tbody tr.hidden. It should look like this:
tbody tr.hidden {
display: none!important;
}
I advise you to use the second solution!
I currently have this Bootstrap table and the problem I'm facing is that the sticky headers aren't working without removing the Bootstrap .table-responsive class. Is this possible without using JS?
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-fixed {
width: 100%;
}
/* This will work on every browser but Chrome Browser */
.table-fixed thead {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
background-color: #FFF;
}
/*This will work on every browser*/
.table-fixed thead th {
position: sticky;
position: -webkit-sticky;
top: 0;
background-color: #FFF;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-striped table-fixed">
<thead>
<tr>
<th>Test</th>
<th>Test</th>
</tr>
</thead>
</table>
</div>
position sticky doesn't work with some table elements (thead/tr) in Chrome. You have added sticky position in thead and th both. try below steps.
remove stick position from thead and keep only in th
Add overflow-x: visible for table-responsive class.
Thanks
See the below code to make table header sticky
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border
</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
</tr>
</tbody>
</table>
</div>
</section>
<style>
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: 160px;
}
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;
}
</style>
I'm using CSS resize:both; property to let users resize my content. See the code below.
.foo {
resize: both;
min-width: 250px;
width: auto;
text-align: center;
min-height: 30px;
border: 1px solid #515151;
border-radius: 6px;
position: absolute;
padding: 0;
overflow: hidden;
text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
box-shadow: 5px 5px rgba(0,0,0, 0.1);
}
.thClass {
margin-left: -3px;
text-align: center;
box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
margin-top: -2px;
min-height: 30px;
line-height: 30px;
font-size: 19px;
cursor: move;
}
.header{
margin-left: 17px;
}
.tableBody {
display: block;
min-height: 25px;
text-align: center;
width: 102%;
margin-left: -2px;
cursor: default;
}
.foo tbody tr td {
display: block;
line-height: 25px;
text-align: center;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
#displaySizes {
list-style: none;
padding: 0;
margin-top: 0;
}
.disp tbody tr th {
border: 1px solid black;
}
.disp tbody tr td {
display: table-cell;
}
<table class="foo disp elementTable">
<tr class="tableHeader">
<th class="thClass" colspan="5">
<span class="header">Device</span>
</th>
</tr>
<tr>
<td rowspan="4" id="sizeContainer">
<ul id="displaySizes">
<li>4:3</li>
<li>16:9</li>
<li>Clock</li>
</ul>
</td>
<td>$100</td>
<td>February</td>
<td>February</td>
<td>February</td>
</tr>
<tr>
<td>February</td>
<td>February</td>
<td>February</td>
<td>February</td>
</tr>
<tr>
<td>February</td>
<td>February</td>
<td>February</td>
<td>February</td>
</tr>
<tr>
<td>February</td>
<td>February</td>
<td>February</td>
<td>February</td>
</tr>
</table>
Is there a way to resize this table step by step using CSS, for example, by [10,10] pixels? JavaScript is also OK. I've searched the web, but could not find anything. Here is the working fiddle for you to play with code.
Here's a solution I put together that will snap to given grid on resize (in this example 20px.)
It uses "cross browser resize event listener", that a another developer has put together (source):
Basically it just listens to the resize event, then sets the styles for width and height using javascript.
Fiddle here:
https://jsfiddle.net/treetop1500/co8zbatz/
// utility function for rounding (20px in this case)
function round20(x)
{
return Math.ceil(x/20)*20;
}
// Attach listener
var myElement = document.getElementById('resize'),
myResizeFn = function(){
h = round20(parseInt(this.style.height,10));
w = round20(parseInt(this.style.width,10));
this.style.height = h + "px";
this.style.width = w + "px";
};
addResizeListener(myElement, myResizeFn);
That's a good point , So It's possible using the css-element-queries Library ,
All you have is creating a ResizeSensor() for your table and then make calculation to set both height and width range change :
See below Snippet :
var width = $('.elementTable').width();
var height = $('.elementTable').height();
var changePX = 50;
new ResizeSensor(jQuery('.elementTable'), function(){
//width calcuation
if(Math.abs($('.elementTable').width()-width) > changePX) {
$('.elementTable').width() > width ? width +=changePX : width -=changePX;
}
$('.elementTable').width(width);
//height calcuation
if(Math.abs($('.elementTable').height()-height) > changePX) {
$('.elementTable').height() > height ? height +=changePX : height -=changePX;
}
$('.elementTable').height(height);
})
.foo {
resize: both;
min-width: 250px;
width: auto;
text-align: center;
min-height: 30px;
border: 1px solid #515151;
border-radius: 6px;
position: absolute;
padding: 0;
overflow: hidden;
text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
box-shadow: 5px 5px rgba(0,0,0, 0.1);
}
.thClass {
margin-left: -3px;
text-align: center;
box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
margin-top: -2px;
min-height: 30px;
line-height: 30px;
font-size: 19px;
cursor: move;
}
.header{
margin-left: 17px;
}
.tableBody {
display: block;
min-height: 25px;
text-align: center;
width: 102%;
margin-left: -2px;
cursor: default;
}
.foo tbody tr td {
display: block;
line-height: 25px;
text-align: center;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
#displaySizes {
list-style: none;
padding: 0;
margin-top: 0;
}
.disp tbody tr th {
border: 1px solid black;
}
.disp tbody tr td {
display: table-cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ResizeSensor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ElementQueries.min.js"></script>
<table class="foo disp elementTable">
<tr class="tableHeader">
<th class="thClass" colspan="5">
<span class="header">Device</span>
</th>
</tr>
<tr>
<td rowspan="4" id="sizeContainer">
<ul id="displaySizes">
<li>4:3</li>
<li>16:9</li>
<li>Clock</li>
</ul>
</td>
<td>$100</td>
<td>February</td>
<td>February</td>
<td>February</td>
</tr>
<tr>
<td>February</td>
<td>February</td>
<td>February</td>
<td>February</td>
</tr>
<tr>
<td>February</td>
<td>February</td>
<td>February</td>
<td>February</td>
</tr>
<tr>
<td>February</td>
<td>February</td>
<td>February</td>
<td>February</td>
</tr>
</table>
Okey, so this is what I’m looking for…
I have 3 links (a href's) in 3 columns in 1 row. Below is 1 column in one row with 3 divs in it.
How do I make the divs fade in/fade out (as stated below) if the links are clicked?
From beginning all #info...’s are hidden.
If Link 1 is clicked #info-first fades in. If then Link 2 is clicked #info-first
fades away and #info-second fades in and so on for all Link's.
Also there is a hide option for all the #info-...’s so it goes back to what it was in the beginning (all hidden).
Simpel demonstration: JSFiddle
UPDATE: SOLUTION
Thank you Eduardo (he commented final solution): See JSFiddle.
HTML:
<div id="banner-content-wrap">
<div class="banner-text"><span>Cool</span> slogan goes here. <span>Cool</span> indeed.
<br/>
<div id="explain">From beginning all #info... is hidden. If Link 1 is clicked #info-first fades in. If then Link 2 is clicked #info-first
<br/>fades away and #info-second fades in and so on. Also there is a hide option for all the #info-...</div>
<div class="banner-links">
<table border="1">
<tr class="first">
<td class="first">about</td>
<td class="second">about</td>
<td class="third">about</td>
</tr>
<tr class="second">
<td class="first">LINK 1
</td>
<td class="second">LINK 2
</td>
<td class="third">LINK 3
</td>
</tr>
<tr class="third">
<td colspan="3">
<div id="info">
<div class="info-first">Link 1 fades in #info-first info
<br/>
<br/>HIDE #info-first
</div>
<div class="info-second">Link 2 fades in #info-second text
<br/>
<br/>HIDE #info-second
</div>
<div class="info-third">Link 3 fades in #info-third text
<br/>
<br/>HIDE #info-third
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
CSS:
#banner-content-wrap {
position: absolute;
top: 25%;
width: 960px;
right: 50%;
margin-right: -480px;
}
#explain {
text-align: center;
font-size: 12px;
color: #000;
}
.banner-text {
text-align: center;
position: absolute;
height: 80px;
width: 950px;
overflow: hidden;
padding: 0;
overflow: visible;
font-size: 36px;
font-family:'Berlin Sans FB';
color: #fff;
text-shadow: 0px -1px 8px rgba(0, 0, 0, 0.33);
}
.banner-text span {
color: #000;
}
.banner-links table {
width: 400px;
margin-left: auto;
margin-right: auto;
padding-top: 25px;
border-collapse:collapse;
}
.banner-links tr.first td.first {
text-align: center;
padding-right: 50px;
}
.banner-links tr.first td.second {
text-align: center;
}
.banner-links tr.first td.third {
text-align: center;
padding-left: 50px;
}
.banner-links tr.first {
font-size: 10px;
font-family:'Verdana';
color: #000;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.33);
opacity: 0.75;
-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
transition: 0.5s;
}
.banner-links tr.second td.first {
text-align: center;
padding-right: 50px;
}
.banner-links tr.second td.second {
text-align: center;
}
.banner-links tr.second td.third {
text-align: center;
padding-left: 50px;
}
.banner-links tr.second {
line-height: 24px;
}
.banner-links tr.second a {
text-transform: uppercase;
font-size: 18px;
font-family:'Verdana';
color: #000;
text-shadow: 0px -1px 8px rgba(0, 0, 0, 0.33);
opacity: 0.75;
-webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
transition: 0.5s;
}
.banner-links tr.second a:hover {
opacity: 0.95;
}
.banner-links tr.second td.first a:hover {
color: #ff0000;
}
.banner-links tr.second td.second a:hover {
color: #34b700;
}
.banner-links tr.second td.third a:hover {
color: #004eb7;
}
.banner-links tr.third td {
background: transparent;
width: 100%;
}
.banner-links #info {
font-size: 12px;
font-family:'Verdana';
text-align: left;
background: rgba(255, 255, 255, 0.33);
}
.banner-links .info-first {
background: #ff0000;
padding: 10px 10px 10px 10px;
}
.banner-links .info-second {
background: #34b700;
padding: 10px 10px 10px 10px;
}
.banner-links .info-third {
background: #004eb7;
padding: 10px 10px 10px 10px;
}
Using fadeToggle() will do the trick
Also using css to hide the elements with info-(something)
$(".second td").click(function(){
$(".info-"+$(this).attr("class")).fadeToggle()
});
Depending on the td clicked on .second we will create the selector for the divs and then we call fadeToggle() to hide them or to show them depending on their current visibility.
div[class^='info-']{
display:none;
}
To hide the divs this select any div with a class that starts with "info-"
See this fiddle