What would be the easiest way to implement javascript on a link such that clicking on the link revealed an image or div with content elsewhere on the web page that was previously invisible?

1 answer


You would want to start by having the image or div be part of a class which is hidden. Then, the script should remove that class. The easiest way, although it may be a bit of overhead, would be to use jQuery. Since you will want your page to work without JavaScript, you will want to have it work as a link as well. A working solution might include the following.

  <a id="show_content" href="<?php echo $_SERVER["PHP_SELF"]; ?>?show_content_p=true">Show the content</a>
  <div id="some_content" class="content<?php if (!isset($_GET["show_content_p"])) echo " hidden; ?>">
    <p>This will be shown if clicked</p>

  .content {
    /* formatting for your content */

  .hidden {
    display: none;

  function ShowContent() {

  $(document).ready(function() {

Keep in mind that I haven't tested this code. Also, if you really want to make it robust, instead of hiding the content, you may want to have it added with AJAX. I know that you asked for the easiest answer, but this is the easiest correct way that I can think of. However, for a simple kludge, the only part you would really need is the "$('#some_content').removeClass('hidden')" which could be added in the href of your link.

Answered almost 9 years ago by kainosnous