I want to show a paragraph if I click on the title. The issue I'm having is that I have multiple titles with each a different paragraph but only one function to handle it. Is this even possible? The function only shows the paragraph for the first title.
I have tried with:
document.querySelectorAll(".class1, .class2")
document.getElementsByClassName("class1 class2")
Both don't seem to work.
function unhide() {
var hid = document.querySelectorAll(".lefthanded", ".measurements");
// Emulates jQuery $(element).is(':hidden');
if(hid[0].offsetWidth > 0 && hid[0].offsetHeight > 0) {
hid[0].style.visibility = "visible";
}
}
<a onclick="unhide()"><h3>Preinstalled Left Hand Kit</h3></a>
<div class="lefthanded">
<p>This is the paragraph</p>
</div>
<a onclick="unhide()"><h3>Product Measurements Requests</h3></a>
<div class="measurements">
<p>This is a different paragraph</p>
One of the quick easy and efficient ways to tackle this is use <detail> tag like this:
<details>
<summary>Your Title</summary>
<p>This is your paragraph</p>
</details>
$("#lefthanded").click(function(){
$(".lefthanded").show();
});
$("#measurements").click(function(){
$(".measurements").show();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="lefthanded"><h3>Preinstalled Left Hand Kit</h3></a>
<div style="display: none;" class="lefthanded">
<p>This is the paragraph</p>
</div>
<a id="measurements"><h3>Product Measurements Requests</h3></a>
<div style="display: none;" class="measurements">
<p>This is a different paragraph</p>
</div>The easy way to do this is (With Jquery):
Just target the paragraph
Hide it with .hide() method.
The show it on click with the selector
($selector).click(()=>{$(paragraph#id).show()})
In this way you can easily do the work.