function screenFunc(id) {
var size = window.matchMedia("(max-width: 620px)")
if (size.matches) { // If media query matches
function myFunction(id) {
var x = document.getElementById(id)
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none'
}
}
}
}
<section class="subject">
<h2 onclick="screenFunc('intro')" class="title-toggle"> Introduction </h2>
<p id="intro"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis laborum eligendi, nulla aliquid perspiciatis tempore cumque odit sapiente ut, reiciendis accusantium sint dolor. Ipsum eaque, quos esse incidunt, quod veniam sequi sint, voluptatem
at quis impedit amet illum cupiditate explicabo! </p>
</section>
I need to access an id in my HTML to toggle a paragraph. Since it is mobile first and responsive, the toggle is only needed with a max-width of 620, so I want to remove the javascript toggle anything larger than that. Can I pass the "id"-parameter from parent to child function like so? It's the first time, I'm using window.matchmedia, so feedback is appreciated.
There's no need for the second function. I think it probably does nothing, because the second function is never called. You could do something like this:
function screenFunc(id) {
var size = window.matchMedia("(max-width: 620px)")
if (size.matches) { // If media query matches
var x = document.getElementById(id)
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none'
}
}
}
<section class="subject">
<h2 onclick="screenFunc('intro')" class="title-toggle"> Introduction </h2>
<p id="intro"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis laborum eligendi, nulla aliquid perspiciatis tempore cumque odit sapiente ut, reiciendis accusantium sint dolor. Ipsum eaque, quos esse incidunt, quod veniam sequi sint, voluptatem at quis impedit amet illum cupiditate explicabo! </p>
</section>