Click Something, Show Something

This walkthrough will show you how to enable some behavior in your web page. Specifically, we will write code to react to a click on some page element, by showing some other page element.

Ready for this?

Things you should already know:

• How to create an HTML document
• How to insert JavaScript into an HTML document

Getting Started

Before we start, open your web browser, the browser developer tools, and a text editor. Create a bare bones HTML document, with a script tag before the closing body tag.

Not familiar with your browser’s dev tools? Read this.

Need a text editor? Read this for our suggestions.

Don’t want to write a bare bones HTML document with a script tag before the closing body tag? Click on the word lazy.

Birds-eye view

There are three steps to accomplishing this behavior.

1. Select a DOM element
2. Add an event listener to that element.
3. Have the event-handler function manipulate style properties of some other element

Let’s Do This

The first thing you need to do in this (somewhat vague) scenario, is select a DOM element and assign it to a variable. Put this inside the HTML script tag to accomplish just that.

    var thingToBeClicked = document.getElementById('theThing');

Wait! Our document doesn’t have any elements to select. Place this into your HTML document body.

<a id="theThing" href="javascript:void(0);">Read More</a>

Run this in your browser (either double click the file or open the browser and use the File->Open menu). The code runs when the page is opened and we have a real, live DOM element stored in our variable.

The code doesn’t accomplish much at this point. Just creates the variable and leaves it sitting there in memory.

Let’s get it to do something we can see. Insert the code below after our first line of JavaScript.

	console.dir(thingToBeClicked);

Then, in your browser dev tools, select the console view to see all sorts of interesting DOM properties of this element.

Shown below in Chrome Developer Tools.

Moving on to the second step, we have to attach an event handler to this DOM element.

	thingToBeClicked.addEventListener('click', function(){
		window.alert('thing has been clicked.');
	}, false);

Please note, the technique used above (addEventListener) does not work in IE8 and lower. If you need IE8 support, you will have to do a little more research. Start Here.

Save the document, refresh your browser, click the link; we are there! We click something, something happens!

A dialog is not very interesting, you say? Fine.

How about we have something show in response to the click?

Step 3 is to have our event-handling code do something.

Let’s replace the content of our HTML body with the code below:

	<article>
		<h1>My Article</h1>
		<section>
			<div class="postContent">
				<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros nibh, elementum eu justo non, facilisis molestie neque. Vivamus vitae nisi non elit congue fermentum ut at lectus. Suspendisse cursus laoreet turpis ac commodo. Nullam sit amet neque felis.
				</p>
				<a href="#" id="showMore">Show More</a>
				<p id="articleMore" style="display:none;">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eros nibh, elementum eu justo non, facilisis molestie neque. Vivamus vitae nisi non elit congue fermentum ut at lectus. Suspendisse cursus laoreet turpis ac commodo. Nullam sit amet neque felis.
				</p>
			</div>
		</section>
	</article>

Let’s make the link with id attribute “showMore”, be the thing we click.

    var showMore = document.getElementById('showMore');

	showMore.addEventListener('click', function(){
		document.getElementById('articleMore').style.display = 'block';
	}, false);

Now, when we click the element with ID attribute ‘showMore’, the element with ID attribute ‘articleMore’ will have it’s CSS display property set to ‘block’ (which shows the element. As opposed to ‘none’, which hides the element).

Save the document, refresh your browser window, click the link and… Click something, show something!

Keep an eye out for part 2 of this article, where we add some functionality allowing the ‘more’ part of the article to be re-hidden.

Here’s the full working code.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Click Something, Show Something</title>
        <style type="text/css">
            article {
                margin: 0 auto;
            }

            footer {
                padding: 12px 0;
            }

            @media(min-width:0px) {
                article {
                    width: 94%;
                }
            }

            @media(min-width:600px) {
                article {
                    width: 50%;
                    margin: 0 auto;
                }
            }
        </style>
    </head>
    <body>
        <article>
            <header>
                <h1>A blog post</h1>
            </header>

            <div class="postbody">
                <div id="postbodyMain">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a aliquam augue, id ultrices lacus. Vivamus volutpat mi diam, scelerisque gravida lorem facilisis vel. Pellentesque laoreet, tellus sit amet consequat molestie, ex ligula condimentum diam, eget faucibus purus nulla at orci. Nulla vulputate eu risus vel maximus. Morbi vel iaculis est, consequat tristique libero. Etiam eu pretium elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <div id="postbodyMore" style="display:none;">
                    <p>Aenean porta diam id tincidunt pretium. Etiam sollicitudin nibh a scelerisque ultricies. Fusce finibus odio vitae diam varius facilisis. Maecenas quam massa, tempus in urna eget, convallis auctor ligula. Morbi sodales urna vel nulla rutrum, eu suscipit tellus pretium. In eu eros ac augue sagittis euismod id nec arcu. Nunc hendrerit, elit pellentesque gravida scelerisque, lacus ligula malesuada mauris, ut porta ante lorem et orci.</p>
                </div>
                <a id="theThing" href="javascript:void(0);">Read More</a>
                <a id="otherThing" style="display:none;" href="javascript:void(0);">Show Less</a>
            </div>

            <footer>
                <div>© This Site</div>
            </footer>
        </article>

        <script>
            var thingToBeClicked = document.getElementById('theThing')

            console.dir(thingToBeClicked);

            thingToBeClicked.addEventListener('click', function () {

                document.getElementById('postbodyMore').style.display = 'block';

            }, false);

        </script>

    </body>
    </html>