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 Answer
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>1 Comment
Rachel Gallen
@RameenRastan btw, if this helps you, you can accept this answer by clicking the tick that appears when you hover beside it. We both earn reputation for it! :)
id?