![]() ![]() Your task is to complete the implementation of src/components/ShowHide/index.js. If the Lastname is being displayed, it should be hidden. You could style these yourself however you like, and everything would still work just fine. When the Show/Hide Lastname button is clicked, If the Lastname is being hidden, it should be displayed. The rest of the CSS simply adds a border to our div (the border is hidden by the display rule, but becomes visible later) and fancied up our show/hide anchors by putting down/up arrows next to them and replacing the standard underline with a dotted border. The only truly important style is the “display: none ” rule on our. I’m technically doing far more styling than is necessary here, mostly for aesthetic purposes. Now that we have our XHTML in place, let’s put together our default CSS. Our JavaScript will use that single variable to do the rest of the work. It’s also important to note that we’re calling our JavaScript using the “onclick” call, and passing it the name of our hidden div. The class names have no relationship to the JavaScript whatsoever, and could really be whatever you wanted them to be. This is a trick I’m using to simplify our JavaScript, as you’ll see later on down the road, so I suggest doing something similar. You’ll notice in the code above that all of our IDs are fairly similar. Technically you could just use the IDs the set that CSS as well, but if you wanted more than one hidden section on your page, that could get messy. I’m then using the classes to set our “default” CSS. The IDs are used by our JavaScript to locate and style the items appropriately. ![]() ![]() There are three things of importance here: the “show” anchor, the “hide” anchor, and our “hidden” div. We’ll start with structuring our XHTML appropriately. ![]()
0 Comments
Leave a Reply. |