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 >
                <p>This is the paragraph</p>
            </div>

            <a onclick="unhide()"><h3>Product Measurements Requests</h3></a>
            <div >
                <p>This is a different paragraph</p>

CodePudding user response：

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>

More about the tag

CodePudding user response：

$("#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;" >
                <p>This is the paragraph</p>
            </div>

            <a id="measurements"><h3>Product Measurements Requests</h3></a>
            <div style="display: none;" >
                <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.