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

1
point

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.

PHP:
  ...
  <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>
  </div>

CSS:
  .content {
    /* formatting for your content */
  }

  .hidden {
    display: none;
  }

JavaScript:
  function ShowContent() {
    $('#some_content').removeClass('hidden');
  }

  $(document).ready(function() {
    $('#show_content').click(ShowContent);
  });

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 over 8 years ago by kainosnous