The three lines in case the action is "hide" do the exact same things, but change the values back, so if the user wants to open the div again he can do so.Menus Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Full Page Tabs Hover Tabs Top Navigation Responsive Topnav Split Navigation Navbar with Icons Search Menu Search Bar Fixed Sidebar Side Navigation Responsive Sidebar Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Sidebar with Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation Responsive Bottom Nav Bottom Border Nav Links Right Aligned Menu Links Centered Menu Link Equal Width Menu Links Fixed Menu Slide Down Bar on Scroll Hide Navbar on Scroll Shrink Navbar on Scroll Sticky Navbar Navbar on Image Hover Dropdowns Click Dropdowns Cascading Dropdown Dropdown in Topnav Dropdown in Sidenav Resp Navbar Dropdown Subnavigation Menu Dropup Mega Menu Mobile Menu Curtain Menu Collapsed Sidebar Collapsed Sidepanel Pagination Breadcrumbs Button Group Vertical Button Group Sticky Social Bar Pill Navigation Responsive Header We change it from "Explain" to "Close" so the user knows that the div will disappear if he clicks the link again. An element's contents is always whatever is between the start and end tag, in a link's case this is the anchor text. Line 3 grabs the same link element, but now changes the element contents. We change it to the exact same code, but instead of "show" as the action, we now have hide. The second line grabs the link element, and instead of changing the style, it changes the address it points to (href), which in our case will be a new piece of javascript code. The bit of code following specifies that we want to change the style, more specifically the display property, and we want to change it to "block". This id argument makes it possible to use one function for all the divs you want to open or close, so we won't need to code the same function for all the different ids out there. In our case, we always grab the element "explanationX", where X is the number beside it, given by the id argument. By specifying "document.getElementById('theidhere')" you can grab any element. this is achieved by "grabbing" the element using its unique id. the first line sets the div's dispaly to block, which means that it will appear, you will be able to read the text. It sees that it is "show", so it executes three lines. When you first click on the link the action is "show", so let's take a look at what's happening there.įirst of all, the script checks what the action is. The action argument will tell the script what we want to do (close the div or show it), the id argument will tell it which element we want to do it with. Take a look at the javascript code below with the explanation afterwards.Īs you can see, the two arguments are named "action" and "id". The first tells the javascript function which will execute that we want to show the div (as opposed to hiding it), the second is a numerical identifier, which should be the same as the number in the div's id. The link contains "javascript:", which indicates that this link doesn't point to a page, but should execute javascript code, in our case a function (display), with two arguments. Once the user clicked the link, we want to change the link, so clicking it again will close the div. I have also given the link an id, with the same number at the end as the div. I have added a number to the id because there might be many more explanations, these would receive different numbers. This is needed so the javascript knows which div I want to change. This form let's you input your order details, please keep it short!Īs you can see I have given the div a unique identifier. As the first step, we need to create a div which will hold the explanation text, and a link which will unhide it for the user.
0 Comments
Leave a Reply. |