You can customize and modify the animations of your Awesome Table apps. This article explains how to insert JavaScript code from your spreadsheet to animate your content dynamically.
2
What are JavaScript templates?
JavaScript template let you add behaviors to your Awesome Table app. For example, you can:
- include dynamic changes (display dates and times, show or hide sections of a page) or updates to your content (update a block of text with input entered by users)
- manipulate and/or animate images and other HTML elements
- perform operations or form validation
JavaScript template
Live example (Card app)
Click the MORE/HIDE button to show or hide the project description and toggle the text on the button.
Create and set up your JavaScript template
Create the template sheet
1. Click the Add Sheet button to insert a blank sheet.
1. Click the New sheet button to insert a blank sheet.
2. Rename the new sheet. In our example, we named it Template.
Set up the JavaScript template
Add a new column for the JavaScript template. You can specify what columns of your template sheet will hold the JavaScript template by having <script> as the column’s header.
You can try this with our example by copying and pasting the following JavaScript code to cell C2.
The JavaScript code below lets you show or hide the summary section containing the description, and this also toggles the text on the button.
function hideShow(button) {
//retrieving the two elements we want to hide and show on the press of the button
const seeMoreDiv = button.parentNode.querySelector(".seemore");
const placeholderDiv = button.parentNode.querySelector(".placeholder");
//if the element is hidden, display it and update the text in the button
if(seeMoreDiv.style.display == "none"){
seeMoreDiv.style.display = "block";
placeholderDiv.style.display = "none";
button.innerHTML = "HIDE";
}
//if the element is visible, hide it and update the text in the button
else{
seeMoreDiv.style.display = "none";
placeholderDiv.style.display = "block";
button.innerHTML = "MORE";
}
}
The JavaScript code above lets you show or hide the Summary section and toggles the text on the button.
![]() |
![]() |
You can also copy the example data source that contains the datasheet, HTML code, and CSS that works with this example.