{"id":289,"date":"2014-05-19T13:51:18","date_gmt":"2014-05-19T13:51:18","guid":{"rendered":"http:\/\/www.se80.co.uk\/training-education\/?p=289"},"modified":"2014-05-19T14:14:11","modified_gmt":"2014-05-19T14:14:11","slug":"hide-and-display-html-element-using-javascript","status":"publish","type":"post","link":"https:\/\/www.se80.co.uk\/training-education\/hide-and-display-html-element-using-javascript\/","title":{"rendered":"Hide and display HTML element using Javascript"},"content":{"rendered":"

Within the JavaScript of your SAP BSP application or standard web page\u00a0it is very simple to\u00a0toggle a\u00a0HTML element between hidden and display mode using the visibility attribute. You would just reference the elements ID and set the visibility attribute\u00a0to ‘hidden’ or ‘visible’, see example below.<\/p>\n


\nHTML Code:<\/strong>
\n<a\u00a0id=”myBackButton”\u00a0href=”?OnInputProcessing(goback)”\u00a0class=”myButton”\u00a0\u00a0>Back\u00a0to\u00a0Index<\/a><\/p>\n


\nJavaScript Code:<\/strong>
\ndocument.getElementById(‘myBackButton’).style.visibility\u00a0=\u00a0‘hidden’;
\nor
\ndocument.getElementById(‘myBackButton’).style.visibility\u00a0=\u00a0‘visible’;<\/p>\n","protected":false},"excerpt":{"rendered":"

Within the JavaScript of your SAP BSP application or standard web page\u00a0it is very simple to\u00a0toggle a\u00a0HTML element between hidden and display mode using the visibility attribute. You would just reference the elements ID and set the visibility attribute\u00a0to ‘hidden’ or ‘visible’, see example below. HTML Code: <a\u00a0id=”myBackButton”\u00a0href=”?OnInputProcessing(goback)”\u00a0class=”myButton”\u00a0\u00a0>Back\u00a0to\u00a0Index<\/a> JavaScript Code: document.getElementById(‘myBackButton’).style.visibility\u00a0=\u00a0‘hidden’; or document.getElementById(‘myBackButton’).style.visibility\u00a0=\u00a0‘visible’;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[22,16],"tags":[],"yoast_head":"\nHide and display HTML element using Javascript - SAP Help, Training and Education<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.se80.co.uk\/training-education\/hide-and-display-html-element-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hide and display HTML element using Javascript - SAP Help, Training and Education\" \/>\n<meta property=\"og:description\" content=\"Within the JavaScript of your SAP BSP application or standard web page\u00a0it is very simple to\u00a0toggle a\u00a0HTML element between hidden and display mode using the visibility attribute. You would just reference the elements ID and set the visibility attribute\u00a0to ‘hidden’ or ‘visible’, see example below. HTML Code: <a\u00a0id=”myBackButton”\u00a0href=”?OnInputProcessing(goback)”\u00a0class=”myButton”\u00a0\u00a0>Back\u00a0to\u00a0Index<\/a> JavaScript Code: document.getElementById(‘myBackButton’).style.visibility\u00a0=\u00a0‘hidden’; or document.getElementById(‘myBackButton’).style.visibility\u00a0=\u00a0‘visible’;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.se80.co.uk\/training-education\/hide-and-display-html-element-using-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"SAP Help, Training and Education\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-19T13:51:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-05-19T14:14:11+00:00\" \/>\n<meta name=\"author\" content=\"se80\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"se80\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/hide-and-display-html-element-using-javascript\/\",\"url\":\"https:\/\/www.se80.co.uk\/training-education\/hide-and-display-html-element-using-javascript\/\",\"name\":\"Hide and display HTML element using Javascript - SAP Help, Training and Education\",\"isPartOf\":{\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/#website\"},\"datePublished\":\"2014-05-19T13:51:18+00:00\",\"dateModified\":\"2014-05-19T14:14:11+00:00\",\"author\":{\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/ddc6a049c1b0790f62d70278be75e511\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/hide-and-display-html-element-using-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.se80.co.uk\/training-education\/hide-and-display-html-element-using-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/hide-and-display-html-element-using-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.se80.co.uk\/training-education\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hide and display HTML element using Javascript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/#website\",\"url\":\"https:\/\/www.se80.co.uk\/training-education\/\",\"name\":\"SAP Help, Training and Education\",\"description\":\"Learn SAP\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.se80.co.uk\/training-education\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/ddc6a049c1b0790f62d70278be75e511\",\"name\":\"se80\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3fd4e388f05bf3c763e46cd1f77afeb2?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3fd4e388f05bf3c763e46cd1f77afeb2?s=96&d=retro&r=g\",\"caption\":\"se80\"},\"url\":\"https:\/\/www.se80.co.uk\/training-education\/author\/se80\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hide and display HTML element using Javascript - SAP Help, Training and Education","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.se80.co.uk\/training-education\/hide-and-display-html-element-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Hide and display HTML element using Javascript - SAP Help, Training and Education","og_description":"Within the JavaScript of your SAP BSP application or standard web page\u00a0it is very simple to\u00a0toggle a\u00a0HTML element between hidden and display mode using the visibility attribute. You would just reference the elements ID and set the visibility attribute\u00a0to ‘hidden’ or ‘visible’, see example below. HTML Code: <a\u00a0id=”myBackButton”\u00a0href=”?OnInputProcessing(goback)”\u00a0class=”myButton”\u00a0\u00a0>Back\u00a0to\u00a0Index<\/a> JavaScript Code: document.getElementById(‘myBackButton’).style.visibility\u00a0=\u00a0‘hidden’; or document.getElementById(‘myBackButton’).style.visibility\u00a0=\u00a0‘visible’;","og_url":"https:\/\/www.se80.co.uk\/training-education\/hide-and-display-html-element-using-javascript\/","og_site_name":"SAP Help, Training and Education","article_published_time":"2014-05-19T13:51:18+00:00","article_modified_time":"2014-05-19T14:14:11+00:00","author":"se80","twitter_card":"summary_large_image","twitter_misc":{"Written by":"se80"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.se80.co.uk\/training-education\/hide-and-display-html-element-using-javascript\/","url":"https:\/\/www.se80.co.uk\/training-education\/hide-and-display-html-element-using-javascript\/","name":"Hide and display HTML element using Javascript - SAP Help, Training and Education","isPartOf":{"@id":"https:\/\/www.se80.co.uk\/training-education\/#website"},"datePublished":"2014-05-19T13:51:18+00:00","dateModified":"2014-05-19T14:14:11+00:00","author":{"@id":"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/ddc6a049c1b0790f62d70278be75e511"},"breadcrumb":{"@id":"https:\/\/www.se80.co.uk\/training-education\/hide-and-display-html-element-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.se80.co.uk\/training-education\/hide-and-display-html-element-using-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.se80.co.uk\/training-education\/hide-and-display-html-element-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.se80.co.uk\/training-education\/"},{"@type":"ListItem","position":2,"name":"Hide and display HTML element using Javascript"}]},{"@type":"WebSite","@id":"https:\/\/www.se80.co.uk\/training-education\/#website","url":"https:\/\/www.se80.co.uk\/training-education\/","name":"SAP Help, Training and Education","description":"Learn SAP","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.se80.co.uk\/training-education\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/ddc6a049c1b0790f62d70278be75e511","name":"se80","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.se80.co.uk\/training-education\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3fd4e388f05bf3c763e46cd1f77afeb2?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3fd4e388f05bf3c763e46cd1f77afeb2?s=96&d=retro&r=g","caption":"se80"},"url":"https:\/\/www.se80.co.uk\/training-education\/author\/se80\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/posts\/289"}],"collection":[{"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/comments?post=289"}],"version-history":[{"count":3,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/posts\/289\/revisions"}],"predecessor-version":[{"id":399,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/posts\/289\/revisions\/399"}],"wp:attachment":[{"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/media?parent=289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/categories?post=289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.se80.co.uk\/training-education\/wp-json\/wp\/v2\/tags?post=289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}