We Keep Coding

Hide/Show table columns depending on the element clicked

I would like to create some type of buttons that would only show the table columns affected to them and hidding every others, and add/remove the active class to the buttons, for example:
Data 1
Data 2
Data 3
<table>
<thead>
<tr>
<th class="fruits">First column</th>
<th class="vegetables">Second column</th>
<th class="nuts">Third column</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fruits">Test 1</td>
<td class="vegetables">Test 2</td>
<td class="nuts">Test 3</td>
</tr>
</tbody>
</table>
For example, when I click on the "Data 2" button, it adds the "active" class to it, hides every other columns and only shows the items having the class called "vegetables".
I am a beginner and I would like to know if that's possible and how? Thank you.

In order to make a column active, you need to figure out the index of the clicked button. After that, you can iterate through the headers and columns to figure out which ones to show or hide.
The example below will only show the clicked column (th and td) of the clicked button.
Update: If you want to show/hide based on the field that was clicked, you can reference the button id and target the class of each table cell.
Array.from(document.querySelectorAll('.buttons a')).forEach(a => {
a.addEventListener('click', handleButtonClick);
});
function handleButtonClick(e) {
let selectedId = e.target.id;
document.querySelectorAll('.buttons a').forEach((a) => {
a.classList[a.id === selectedId ? 'add' : 'remove']('active');
});
document.querySelectorAll('table > thead > tr th').forEach(th => {
th.style.display = th.classList.contains(selectedId) ? 'table-cell' : 'none';
});
document.querySelectorAll('table > tbody > tr td').forEach(td => {
td.style.display = td.classList.contains(selectedId) ? 'table-cell' : 'none';
});
};
.buttons a {
display: inline-block;
border: thin solid grey;
padding: 0.25em 0.5em;
text-decoration: none;
background: #AAA;
}
.buttons a.active {
background: #FFF;
}
table, th, td {
border: thin solid grey;
}
table {
border-collapse: collapse;
margin-top: 1em;
}
th, td {
padding: 0.25em;
}
<div class="buttons">
Fruits
Vegetables
Nuts
</div>
<table>
<thead>
<tr>
<th class="fruits">Fruits</th>
<th class="vegetables">Vegetables</th>
<th class="nuts">Nuts</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fruits">Apple</td>
<td class="vegetables">Artichoke</td>
<td class="nuts">Almond</td>
</tr>
<tr>
<td class="fruits">Banana</td>
<td class="vegetables">Broccoli</td>
<td class="nuts">Brazil Nut</td>
</tr>
<tr>
<td class="fruits">Cherry</td>
<td class="vegetables">Carrot</td>
<td class="nuts">Cashew</td>
</tr>
</tbody>
</table>

Hope this suits you.
Some tweaks may be needed if you'll need extra classes on the <table>
$(() => { // wait until DOM is ready
$('.btn').click(function onclick() { // set up onclick handler for all buttons of class 'btn'
// on click
$('.btn').removeClass('active');
// remove 'active' class from all buttons
$(this).toggleClass('active');
// but add 'active' class to the clicked one (this)
$('table').attr('class', $(this).attr('id'))
// finally set the table class to be the id of the clicked button
})
})
a.active { color: green }
table .fruits { display: none }
table .vegetables { display: none }
table .nuts { display: none }
table.fruits .fruits { display: table-cell }
table.vegetables .vegetables { display: table-cell }
table.nuts .nuts { display: table-cell }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="btn" id="fruits" >Data 1</a>
Data 2
<a href="#" class="btn" id="nuts" >Data 3</a>
<table>
<thead>
<tr>
<th class="fruits" >First column</th>
<th class="vegetables">Second column</th>
<th class="nuts" >Third column</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fruits" >Test 1</td>
<td class="vegetables">Test 2</td>
<td class="nuts" >Test 3</td>
</tr>
</tbody>
</table>

Would like to know how to filter results from a specific (nested, table within table) table heading?

Have been dabbling around with this piece of code, only I could do with some input. Could really do with a follow up working examples altered code snippet if at all possible. Need to figure the filter/search - returning results being limited to a specified table heading ('th/tr' - tags), namely the Title heading and search within ONLY this area, though displaying the whole cells still (Title, Description and Date).Any questions I'll be pleased to help.
var input, table, rows, noMatches, markInstance;
$(document).ready(function init() {
input = document.getElementById('myInput');
noMatches = document.getElementById('noMatches');
table = document.getElementById('myTable');
rows = table.querySelectorAll('tr');
markInstance = new Mark(table);
input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
});
function ContactsearchFX() {
resetContent();
markInstance.unmark({
done: highlightMatches
});
}
function resetContent() {
$('.noMatchErrorText').remove();
//Remove this line to have a log of searches
//noMatches.textContent = '';
rows.forEach(function(row) {
$(row).removeClass('show');
});
}
function highlightMatches() {
markInstance.mark(input.value, {
each: showRow,
noMatch: onNoMatches,
})
}
function showRow(element) {
//alert(element);
$(element).parents('tr').addClass('show');
$(element).parents('tr').siblings('tr').addClass('show');
//Parents incase of several nestings
}
function onNoMatches(text) {
$('#myInput').after('<p class="noMatchErrorText">No records match: "' + text + '"</p>');
}
.input-wrap {
margin-bottom: 12px;
}
#myInput:invalid~.hints {
display: block;
}
#noMatches:empty,
#noMatches:empty+.hints {
display: none;
}
.style1 tr {
display: none;
}
.style1 .show {
display: table-row;
}
mark {
background: orange;
font-weight: bold;
color: black;
}
.style1 {
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.11/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
<div class="input-wrap">
<label>
Search Titles:
<input id="myInput" type="text" required
placeholder="Search Titles" />
</label>
</div>
<div class="hintsWrap">
<p id="noMatches"></p>
<p class="hints">
Hints: type "Title1", "Title2", "Title3"...
</p>
</div>
<br />
<br />
<table id="myTable" style="width: 100%" class="style1">
<tr>
<td>
<br />
<br />
<br />
<table style="width: 100%">
<tr>
<th class="style1">Title</th>
<td>title1</td>
</tr>
<tr>
<th class="style1">Description</th>
<td>description1</td>
</tr>
<tr>
<th class="style1">Date</th>
<td>date1</td>
</tr>
</table>
<br />
<table style="width: 100%">
<tr>
<th class="style1">Title</th>
<td>title2</td>
</tr>
<tr>
<th class="style1">Description</th>
<td>description2</td>
</tr>
<tr>
<th class="style1">Date</th>
<td>date2</td>
</tr>
</table>
<br />
<br />
<table style="width: 100%">
<tr>
<th class="style1">Title</th>
<td>title3</td>
</tr>
<tr>
<th class="style1" style="height: 23px">Description</th>
<td style="height: 23px">description3</td>
</tr>
<tr>
<th class="style1">Date</th>
<td>date3</td>
</tr>
</table>
<br />
<br />
<table style="width: 100%">
<tr>
<td>
<table style="width: 100%">
<tr>
<th class="style1">Title</th>
<td>title4</td>
</tr>
<tr>
<th class="style1">Description</th>
<td>description4</td>
</tr>
<tr>
<th class="style1">Date</th>
<td>date4</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>

As continuation from comments above, and since this was something basic that you would like to use, i posted it here.
I added some notes on the code but the essences are:
This is just a really basic approach without any use of libraries.
I play with classes in order to hide the table rows and also to mark the result
Although i leave the part on the script that display: none; the lines of the table, you can manipulate the CSS and delete it from the code.
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.querySelectorAll("tbody > tr");
for (i = 0; i < tr.length; i++) { // Loop through all table rows, and hide those who don't match the search query
td = tr[i].getElementsByTagName("td")[0]; // this will search on the Title col. You can change this to search on other cols.
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) { // found
tr[i].style.display = "";
tr[i].classList.add("mark"); // mark result
}
else { // didn't found
tr[i].style.display = "none";
tr[i].classList.remove("mark"); // unmark result
}
}
if (input.value === '') { // case the input is clear
tr[i].classList.remove("mark"); // unmark result
tr[i].style.display = "none";
}
}
}
table {position: relative; min-width: 320px;} /* */
tbody tr {opacity: 0;} /* this will hide the table's info + will show the result under the headers */
tr.mark {opacity: 1;} /* this will show the result row */
/* basic style (markers) to the result row - just for demonstration purpose */
tr.mark td {background: yellow;} /* (second) col */
tr.mark td:first-child {background: blue;} /* first col */
tr.mark td:last-child {background: orange;} /* third col*/
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search Titles..">
<table id="myTable">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>bla bla bla</td>
<td>description1</td>
<td>date1</td>
</tr>
<tr>
<td>yada yada yada</td>
<td>description2</td>
<td>date2</td>
</tr>
<tr>
<td>Another Title</td>
<td>description3</td>
<td>date3</td>
</tr>
</tbody>
</table>
Hope that it is what you searched for, and Enjoy code!

Solution 1. you can play with css selectors to achieve your goal:
#myTable table tr:first-child td mark {
background: orange;
font-weight: bold;
color: black;
}
mark {
background: initial;
}
Solution 2. edit your init function for sibling only titles like this:
$(document).ready(function init() {
input = document.getElementById('myInput');
noMatches = document.getElementById('noMatches');
/************************************************
NOTE :: your last table element doesn't match your template
************************************************/
table = document.querySelectorAll('#myTable table tr:first-child td');
rows = document.querySelectorAll('#myTable table tr');
markInstance = new Mark(table);
input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
});
Have fun

Bootstrap 3 and Angular JS - row with table and div

I am newbie to front-end who is using bootstrap and can't really figure out how to achive this effect:
I talk about row with table and hidden div. Table is 100% width and when hidden div appears after button is clicked, table will resize to 60-70% and rest of width will be for div. When I close div(makem it hidden), then table will back to 100% width.
Could you help me please to understand how should I do it the most common and correct way?

Here! Without AngularJs. You could add some animation to make it more fluid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="script.js"></script>
<style>
body{
margin: 0;
padding: 0;
overflow: hidden;
}
table{
margin: 0;
padding: 0;
background: grey;
float: left;
}
table tr, td, th{
margin: 0;
padding: 0;
}
#divToResize{
width: 0;
height: 100px;
margin: 0;
padding: 0;
background: blue;
float: left;
color: white;
}
</style>
<script>
'use strict';
let resized = false;
function resize(){
if (resized === false){
document.getElementById("tableToResize").style.width = "60%";
document.getElementById('divToResize').style.width = "40%";
resized = true;
} else{
document.getElementById("tableToResize").style.width = "100%";
document.getElementById('divToResize').style.width = "0";
resized = false;
}
}
</script>
</head>
<body>
<div id="container">
<table cellpadding="0" style="width: 100%;" id="tableToResize">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr><tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr><tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr><tr>
<td>Header 1</td>
<td>Header 2</td>
<td>Header 3</td>
</tr>
</table>
<div id="divToResize">
I love Food
</div>
<button onclick="resize()">Resize</button></div>
</body>
</html>

Angular provides a number of built-in directives for manipulating CSS styling conditionally/dynamically - for ex. ng-class - use when the set of CSS styles is static/known ahead of time
Here is simple way to change width of table cell, after click :
<button ng-hide="click" ng-click="click = true">click</button>
<button ng-hide="!click" ng-click="click = false">click</button>
<table id="mytable">
<thead>
<tr>
<th>Name</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in data">
<td >
{{data.person}}
</td>
<td style="background:grey" ng-class="{after_click_width: click}">
{{data.person}}
</td>
</tr>
</tbody>
</table>
style:
.after_click_width {
width: 70%
}
working plunker: http://plnkr.co/edit/DuxbZFZbUpjU2BSLlpm2?p=preview

Delete table rows that are checked using one button

As the title suggests, I have created a table which I am populating with a list, and I also have a checkbox next to each element of that table. Finally I have a button labelled Delete. I want to attach that button with the actual delete operation.
Code of the button (it is inside another table):
<tr id="deleteproject" >
<td width="180" align="center" background="ButtonBackground.png"
onclick = "deleteRow('plist')">
<style="text-decoration:none; display:block; width:100%;
height:100%">
<font size="0.5px"><br/></font>
<font id="DeleteProject" face="verdana" color="white">
DELETE</font>
</a>
</td>
</tr>
The table:
<table ID="plist" border="0" cellpadding="0" cellspacing="0" datasrc="#clicklist"
style="WIDTH: 380px">
<tr>
<td id="projline" width="100%" align="left" valign="middle"
style="margin-left: 16px;">
<input type="checkbox" name="AAA"/>
<font size="3" face="Arial">
<a id="proj" href="urn:a">
<span datafld="Name"
style="margin-left: 20px; line-height: 26px;"></span>
</a>
</font>
</td>
</tr>
</table>
rowDelete function in JS:
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked)
{
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e)
{
alert(e);
}
}
When I select a checkbox from a row and push the delete button, I get an object error, which I think means something is null or not understood in the JS code.

You must create a proper table first. The table is invalid in HTML5 and in HTML4, the button needs to be inside a table. Please read this article.
When I select a checkbox from a row and push the delete button, I get an object error, which I think means something is null or not understood in the JS code.
I don't know where to start ... looking at the JS, you are trying to target rows by referencing them by the TableRow Object? or ChildNode? Either way, the vague error message you are receiving is because you must reference the elements in the DOM as an object. There are several ways to do so in your situation, for example:
The tr needs to be referenced by what they are: <tr> the tag name.
var All_TR_Tags = document.getElementsByTagName('tr');
Now All_TR_Tags is an array-like object
Please review the demo and ask questions because I can't make a list of what is wrong and what issues that need to be addressed because it would take hours. The demo's styling is not part of the topic, I just used it because it's a default style I use for tables. The structure of the table is important as much as the JS though. The source itself has been extensively annotated. Please do not hesitate to ask if you have any further questions.
Snippet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>delRows</title>
<style>
.x th {
color: #FFF;
background: #2C7EDB;
padding: 10px;
text-align: center;
vertical-align: middle;
}
.x tr:nth-child(odd) {
background-color: #333;
color: #FFF;
}
.x tr:nth-child(even) {
background-color: #D3E9FF;
color: #333;
}
.x td {
border-style: solid;
border-width: 1px;
border-color: #264D73;
padding: 5px;
text-align: left;
vertical-align: top;
position: relative;
}
.x thead th:first-child {
border-top-left-radius: 6px;
}
.x thead th:last-child {
border-top-right-radius: 6px;
}
.x tbody tr:last-child th:first-child {
border-bottom-left-radius: 6px;
}
.x tbody tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
th {
width: 30%;
}
th:first-of-type {
width: 10%;
}
table {
width: 80%;
}
</style>
</head>
<body>
<table id="T1" class="x">
<thead>
<tr>
<th>
<input id="btn1" type="button" value="DelRows" onclick="delRows('T1')" )/>
</th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<td>
<input id="chx1" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row2">
<td>
<input id="chx2" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row3">
<td>
<input id="chx3" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row4">
<td>
<input id="chx4" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row5">
<td>
<input id="chx5" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row6">
<td>
<input id="chx6" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row7">
<td>
<input id="chx7" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row8">
<td>
<input id="chx8" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row9">
<td>
<input id="chx9" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row10">
<td>
<input id="chx10" type="checkbox" />
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<script>
function delRows(tableID) {
//1| Take the function's argument and reference it as an id.
var table = document.getElementById(tableID);
//2| getElementsByTagName()[0]¹ will find the first† element with the <tbody> tag.
/* †You can use [0] to specify the first tag, [1] for the second tag, etc. <tbody> is the direct parent of all <tr>, so that's why we want a reference to it */
var tb = table.getElementsByTagName('tbody')[0];
//3| Collect all checkboxes that are checked into a NodeList² named 'checked'.
/* querySelectorAll³ is like getElementBy* on steroids. It accepts a selector as a target to reference, the syntax is like CSS or inside a jQuery object $(selector). Notice the ":checked"⁴ pseudoselector */
var checked = document.querySelectorAll('input[type="checkbox"]:checked');
//4| Collect all <tr> in <tbody> into a NodeList named 'rows'.
/* Remember we referenced the <tbody> as var tb on step 2? */
var rows = tb.querySelectorAll('tr');
//5| Iterate through the checked NodeList from step 3.
/* When dealing with arrays and array-like objects, you'll need to use a 'for loop' to iterate (or loop)⁵ 90% of the time. */
for (var i = 0; i < checked.length; i++) {
//6| For every checked checkbox find it's parent's parent and name it 'row'.
/* In the checked NodeList, there are all of the checked checkboxes so on each loop we are finding that particular checkbox's "grandmother". Example:
i = 4 means we are on the 3rd iteration (loop).
checked[4] is the third checked checkbox.
.parentNode⁶ is the parent element of the third checked checkbox--a <td>
The second .parentNode is the parent of the <td> which is a <tr> */
var row = checked[i].parentNode.parentNode;
//7| Remove 'row' from <tbody>
/* removeChild⁷ needs the parent of the element (or node) that you intend to remove. Thinking ahead, we have the parent of all <tr>: tb (a.k.a. <tbody>) from step 2. */
tb.removeChild(row);
//8| At this point, i is i+1 we go back to step 5 as long as "i < checked.length".
/* var i = one loop of steps 6, 7, and 8. It started initially as 0 which by design coincides with the 0 count index of arrays and array-like objects like the NodeList checked. i is then incremented by 1 (i++) thereby completing the loop. As long as i is less than the total amount of checked checkboxes, it will continue looping. */
}
//9| At this point, i is greater than the total amount of checked checkboxes and stops looping thru steps 6, 7, and 8.
/* This is the end of the function. Sometimes you'll see "return false;", but we didn't need it because the click event that starts this function is just a button. If we kept the original markup, that used an anchor, then "return false" would be necessary because an anchor by default will jump to a location which is undesirable if you are using the anchor as a button instead. */
}
</script>
</body>
</html>

Use 'view more' button to enhance information on each table row

I have a pretty simple html table, there are lots of information i want to add for each row but i cant display everything when the page is loaded because it is going to make everything very clumsy. So i want to add a view more button in another column for each of the row.
I have already tried writing a JavaScript code but its not working as i want. What i want is:
The row should be completely invisible until i click the view more (i tried putting the tags inside the div but it messed everything up by putting the row outside the table entirely).
I want the code to work for all the rows so i don't have to write separate codes for each row.
I want the extended information for a row to be invisible whenever i try to view more for another row.
If possible, i would like a simple animation for showing the extended animation.
Below is my HTML code:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>View More</td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>John Doe is a man</p>
<p style="text-align:right;">Hide this content.</p>
</div>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>View More</td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>Jane Doe is a woman</p>
<p style="text-align:right;">Hide this content.</p>
</div>
</td>
</tr>
</table>
Below is my CSS:
<style type="text/css">
.more {
display: none;
}
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left;
}
a.hideLink {
background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f;
}
</style>
Below is my Javascript:
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>

Since you tagged jQuery, I'm assuming you're willing to use it, so here's an example of a fix with jQuery:
EDIT: The html has changed, the second row failed to work due to the ID selector
HTML
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>View More</td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>John Doe is a man</p>
<p style="text-align:right;">Hide this content.</p>
</div>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>View More</td><!-- Note the change in the showHide() function -->
</tr>
<tr>
<td colspan="3">
<div id="exampleFemale" class="more"><!-- Note the change in the ID -->
<p>Jane Doe is a woman</p>
<p style="text-align:right;">Hide this content.</p><!-- Note the change in the showHide() function -->
</div>
</td>
</tr>
</table>
Javascript
function showHide(shID) {
if ($('#' + shID)) {
if ($('#' + shID+'-show').css('display') != 'none') {
$('#' + shID+'-show').css({'display':'none'});
$('#' + shID).css({'display':'block'});
}
}
else {
$('#' + shID+'-show').css({'display':'inline'});
$('#' + shID).css({'display':'none'});
}
}
Note the changes inthe Javascript -> jQuery where there used to be document.getElementById(shID+'-show') is now $('#' + shID+'-show') and where there used to be .style.display = 'none'; is now .css({'display':'none'});
Don't forget to include jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Hope this helps!