Up until now I've been using if else statements for the code that toggles visibility in Javascript, but there is a quicker way using a ternary operator.



Click this! HIDDEN SECRETS!

And don't worry, you can change the HIDDEN SECRETS! to be anything you want--divs, pictures, text, whatever. You could change this code so that something other than visibility changes. There are a lot of things you can do. Here's an example (You can click this example that changes colors for instance). Make sure you change the id (where it says test) to something different for each instance of this code on your page! Otherwise it will not work!

Here's the code for you to copy and play with:
<a href="javascript:;" onmousedown="document.getElementById('test').style.display=(document.getElementById('test').style.display=='inline')?'none':'inline';">Change display!</a> <span id="test" style="display:none">HIDDEN SECRETS!</span>

Here's how it reads in pseudocode:

When there's a click, go to the element with the id of test and change its display value
if the element with the id of test has a display value of inline then say 'none' but otherwise say 'inline'.

The ternary operator, which is the section with the ? and the : in the code is simplified like this:
if this part is true ? do this thing : but otherwise do this thing

I will do my best to answer any questions you might have or change the code to more suit your needs but I am still learning like you.

Good Learning Sources:
StackOverflow where people answered a question I had (but I wasn't the asker, I just googled) about the purpose of the question mark
Mozilla Developer Network where they explain it, but this one was kind of complicated for me. Still useful, helped me get the idea.
ITAuthor was the plainest explanation but they still do it in a way that is complicated for me
W3Schools Doesn't have an article on this but I learned other stuff there and it's the best place to be looking for stuff.