How to Make an Expandable Banner With JavaScript

by Cathlene S. Baptista

One of the most useful features of client-side programs like JavaScript is that they can be used to dynamically modify web page user interfaces. Although server-side programs like PHP or Perl can also be used to modify Web page elements, their use requires a server request, a process that typically interrupts the user experience. Dynamic page elements, such as expanding banners, extending text and changing layouts are well suited for a language that immediately and directly responds to user interaction with page changes.

1

Open a text editor, and create a new file named expandBanner.html. In most text editors, create new files by selecting “New” from the “File” menu. Add some basic HTML tags to the file, including “<html>,” “<head>,” “</head>,” “<body>,” “</body>” and “</html>.” <html> <head></head> <body></body> </html>

2

Add a “<div>” tag between expandBanner.html’s “<body>” and “</body>” tags. Assign the following attributes to the <div> tag: id; "mybanner," style; "background:blue," "border:1px solid," "height:30px" and "width:100px." Add a closing “</div>” tag to complete the banner. While the "id" attribute must be "mybanner," the style attribute values can be changed to suit the user interface. <div id="myBanner" style="background:blue;border:1px solid;height:30px;width:100px;"> </div>

3

Add an anchor tag (“<a>”) after the close “</div>” tag. Set the anchor tag’s “href” attribute to “#,” give the anchor the text “Click to Expand Banner,” and close the “</a>” tag. <a href="#">Click to Expand Banner</a>

4

Add an “onclick” event to the anchor tag that calls a function named “expandBanner.” <a href="#" onclick="expandBanner()">Click to Expand Banner</a>

5

Add an open JavaScript delimiter (“<script type="text/javascript">") and a closing JavaScript delimiter (“</script>”) to expandBanner.html. Place the delimiters between the “<head>” and “</head>” tags. <script type="text/javascript"> </script>

Items you will need

References

About the Author

Cathlene S. Baptista began writing professionally in 2010, specializing in technical topics. She has also worked at McGraw-Hill as a writer and editor. Baptista holds a Bachelor of Arts in psychology from the University of Maryland and a Master of Science in information systems from George Washington University.