Change content dynamically when you click on a link
Instead of showing and hiding one piece of content, you may want to give the viewer several options and display the chosen content when a particular link is clicked. To do this, you will first need an HTML document. In this case, you will use the following HTML and save the file as technews.html. Use this code to provide your users with this animation: ```html <head> <title>Select Tech News</title> <link href='technews.css' rel='stylesheet'> </head> <div class='wrapper'> <div class='headline'>Nick Delivers Crushing Defeat to John</div> <div id='top_story_nav' class='story_nav'> <a href='#sumdiv' id='sumlink'>Summary</a> <a href='#statsdiv' id='statslink'>Stats</a> <a href='#comdiv' id='comlink'>Comments</a> </div> <div id='sumdiv' class='spart'> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <div id='statsdiv' class='spart'> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </div> <div id='comdiv' class='spart'> Donec at augue ligula. In vitae laoreet diam, at semper ante. Nulla vel mi posuere, molestie ante in, fermentum leo. Donec sed est pretium, dapibus lacus non, volutpat dolor. Suspendisse potenti. Cras sed massa molestie, gravida leo a, semper metus. Fusce lacus mi, aliquet consequat justo vitae, feugiat interdum magna. Aliquam vehicula faucibus volutpat. <div> </div> <script src='technews.js'></script> ``` Notice that there is a wrapper div, which you will use to contain all of the content. Within it, you have the headline div, the top_story_nav div, and the three content divs (sumdiv, statsdiv, and comdiv). The script will allow each link to display one of the content divs while hiding the other two. This way, the user can view one section at a time rather than scrolling to the desired section. The next thing you will do is add a little style to the page by creating a CSS file. Include the following code and save the file as technews.css. ```css .wrapper{ width: 590px; height:390px; padding:5px; overflow:scroll; font-size: 1em; font-family:Verdana, sans-serif;} .headline {font-weight:bold; font-size:1.8em; font-family:Arial, sans-serif; background-color:#6699cc; text-align:center;} .story_nav{margin:0 0 10px 0; padding:2px; background-color:#ddd; word-spacing:20px; text-align:center;} .spart{margin-bottom: 10px;} ``` This defines the size of the wrapper div, which will be 600×400 pixels when the padding is included. It allows content that is longer to be scrolled by the user within the wrapper. The other styles provide some color, margins, padding, and spacing for the other elements. You can of course adjust these to fit your preferences. Finally, you will need to create the JavaScript file. Include the following code and save the file as technews.js. ```js let slinks = [document.getElementById("sumlink"), document.getElementById("statslink"), document.getElementById("comink")], sdivs = [document.getElementById("sumdiv"), document.getElementById("statsdiv"), document.getElementById("comdiv")]; function change_div(count) { slinks[count].addEventListener("click", function(event) { event.preventDefault(); sdivs[count].style.display = "block"; for(let j = 0; j < sdivs.length; j++) { if(j === count) { continue; }else { sdivs[j]style.display = "none"; } } }, false); } for(let i = 0; i < slinks.length; i++) { change_div(i); } sdivs[1].style.display = "none"; sdivs[2].style.display = "none"; ``` The three links correspond to the three content divs, and so the elements from both sets are placed into arrays (slinks and sdivs). The change_div() function will be explained shortly, but first notice the for loop after the function. This cycles through the slinks array and calls the change_div() function for each link, passing the value of i along as an argument. This argument will be used to register the click event for each element and to change the appropriate content when each link is clicked. Try it out on your blog and let us know how it turns out. If you prefer, we'll add more elements to the javascript function to give it a more professional look. Leave a comment so I know if this post was of interest to you. Thank you