Javascript how hidden div onclick of phrase

Question

I'd like to make it so that when I click on a term, a <div></div> box is revealed. Here's my code:

<a><u>ilioinguinal and genitofemoral nerves</u><div><img src="paste-66846870995528.jpg" /></div></a>

Right now I have it so the default is that if a>div then the div is hidden:

a>div { display: none; }

And I only show the div if the <a></a> is hovered:

a:hover>div {
border: 1px solid black;
font-weight:normal;
font-family:garamond;
font-size: 14px;
display: block;
text-align:center;}

However, as I mentioned earlier I like to make it so that when I click on a term, the div is revealed.

I saw a tutorial that used this:

<script>
function clickDiv() {
  var x = document.getElementById("clickable");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

<a onclick="clickDiv()"><u>ilioinguinal and genitofemoral nerves,</u><div id="clickable"><img src="paste-66846870995528.jpg" /></div></a>

But this just displays the very first phrase's image, not the image associated with the specific phrase I click.

Answer 1

If you want a true toggle, this will work:

 document.addEventListener('click', evt => { var el = evt.target; if (el.tagName === 'U') { el = el.parentElement; } if (el.tagName === 'A') { el.classList.toggle('open'); } }); 

 a > div { display: none; } a.open > div { border: 1px solid black; display: block; font: 14px garamond; text-align:center; } 

 <a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/> <a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/> <a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/> <a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/> <a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/> <a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/> <a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/> 

You would place in your <div> whatever you wanted.

The event handler happens on the <u> tag so we need to go up to its parent, which is the <a> tag. Then we toggle the class 'open' .

If you want the newly opened item to close the others then try this:

 document.addEventListener('click', evt => { var el = evt.target; if (el.tagName === 'U') { el = el.parentElement; } var oldEl = document.querySelector('a.open'); if (oldEl && oldEl !== el) { oldEl.classList.remove('open'); } if (el.tagName === 'A') { el.classList.toggle('open'); } }); 

 a > div { display: none; } a.open > div { border: 1px solid black; display: block; font: 14px garamond; text-align:center; } 

 <a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/> <a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/> <a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/> <a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/> <a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/> <a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/> <a><u>ilioinguinal and genitofemoral nerves</u><div>Inside DIV</div></a><br/> 

Answer 2

You could do something like this with jQuery.

$(function() {
    $('.class-of-a').click(function(e) {
        e.preventDefault;
        var target = $(this).attr('data-target');

        $(target).css({display: 'block'});
    });
});

Then you set your attribute to

<a data-target="#targetID">Link</a>

Which would make the chosen targetID to be displayed when specific is pressed.