How to hide html elements without HTML dom using JavaScript?
Question
I want to dynamically hide table elements based on input from javascript. Normally I would use .getElementById() to access the tables that I want to show or hide, but I can't use HTML DOM for this. What alternatives are there?
1 answers
solution1
1 2016-05-13 17:12:09
You can do this using just pure css. Abandon the js. Examine this snippet. It has a 'trigger' (in the show/hide button). I'm sure it can be adjusted for your purposes.
html { background: white } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } figure { margin: 0 0 1.3rem 0; -webkit-transition: .125s linear; -moz-transition: .125s linear; -ms-transition: .125s linear; -o-transition: .125s linear; transition: .125s linear; } figure img { max-width: 100%; height: auto; } body { max-width: 480px; width: 90%; margin: 3em auto; font-size: 75%; line-height: 1.3rem; font-family: sans-serif; position: relative; *zoom: 1; } body:before, body:after { content: ""; display: table; } body:after { clear: both } p { margin-bottom: 1.3rem } article { margin-bottom: 3rem; position: relative; *zoom: 1; } article:before, article:after { content: ""; display: table; } article:after { clear: both } article figure { float: left; width: 32.5%; } article section:first-of-type { float: right; width: 62.5%; } article section:last-of-type { display: none; visibility: hidden; } section { -webkit-transition: .125s linear; -moz-transition: .125s linear; -ms-transition: .125s linear; -o-transition: .125s linear; transition: .125s linear; } input[type=checkbox] { border: 0; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } label { position: absolute; bottom: -3rem; left: 0; width: 100%; text-align: center; padding: .65rem; box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1); } label:hover { background: rgba(0, 0, 0, .5); color: rgb(255, 255, 255); } label span:last-of-type { display: none; visibility: hidden; } input[type=checkbox]:checked ~ section { display: block; visibility: visible; width: 100%; } input[type=checkbox]:checked ~ figure { width: 100% } input[type=checkbox]:checked ~ label span:first-of-type { display: none; visibility: hidden; } input[type=checkbox]:checked ~ label span:last-of-type { display: block; visibility: visible; }
<body> <article> <input type="checkbox" id="read_more" role="button"> <label for="read_more" onclick=""><span>Show</span><span>Hide</span> </label> <figure> <img src="http://www.musicmatters.ie/images/bara2.jpg" alt="Picture" /> </figure> <section> <p>Short Intro goes here. Write whatever you like.</p> </section> <section> <p>Full article goes here. We'll make do with lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu orci elit. Pellentesque vel risus tortor. Pellentesque ut diam mi. Nunc iaculis ante ac tempus scelerisque. Etiam vestibulum elementum quam et interdum. Integer vitae augue vitae nunc pulvinar scelerisque eu vitae justo. Mauris urna erat, ornare ut eros non, varius bibendum mauris. Vivamus dolor felis, tincidunt sed malesuada vel, ornare non ligula. Curabitur blandit massa vitae ullamcorper fermentum. Nam rutrum odio dui, vitae tempus dui maximus sed.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu orci elit. Pellentesque vel risus tortor. Pellentesque ut diam mi. Nunc iaculis ante ac tempus scelerisque. Etiam vestibulum elementum quam et interdum. Integer vitae augue vitae nunc pulvinar scelerisque eu vitae justo. Mauris urna erat, ornare ut eros non, varius bibendum mauris. Vivamus dolor felis, tincidunt sed malesuada vel, ornare non ligula. Curabitur blandit massa vitae ullamcorper fermentum. Nam rutrum odio dui, vitae tempus dui maximus sed.</p> </section> </article>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to display/hide HTML elements using JavaScript
Getting a HTML element DOM as string using javascript without child elements
hide Html elements by using javascript
Hide HTML elements without javascript, only CSS
How to target HTML DOM elements from an external webpage using JavaScript
How to access the fields of Elements in HTML DOM by Javascript?
How to undoably manipulate HTML DOM elements with javascript?
How hide/show enable/disable HTML elements using Javascript/jQuery?
Hide Multiple Elements in html using javascript
Hide/Unhide html elements using Jquery or Javascript
Related Tags