Show/Hide div

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • shapper
    #1

    Show/Hide div

    Hello,

    In a simple HTML page, index.html, I have:
    - 3 anchors: A, B and C;
    - 3 divs: dA, dB and dC;

    Each anchor should load, when clicked, index.html but anchor A should
    make dA visible and the other invisible, anchor B should show dB and
    hide the others.

    How can I do this?

    Thanks,
    Miguel
    Tags: None
    • BRitchie
      #2
      Re: Show/Hide div

      On Jun 3, 5:15 pm, shapper <mdmo...@gmail. comwrote:
      Hello,
      >
      In a simple HTML page, index.html, I have:
      - 3 anchors: A, B and C;
      - 3 divs: dA, dB and dC;
      >
      Each anchor should load, when clicked, index.html but anchor A should
      make dA visible and the other invisible, anchor B should show dB and
      hide the others.
      >
      How can I do this?
      >
      Thanks,
      Miguel
      This was tested very quickly but works in IE 7.

      It uses Javascript but you didn't specify a scripting language of
      choice.

      <code>
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
      TR/html4/strict.dtd">
      <html lang="en">
      <head>
      <title>Dynami c Java Querystring</title>
      </head>
      <body>
      <script type="text/javascript">
      <!--
      function querySt(param) {
      var loc = window.location .search.substri ng(1);
      var query = loc.split("&");
      for (i=0;i<query.le ngth;i++) {
      var currParam = query[i].split("=");
      if (currParam[0] == param) {
      return currParam[1];
      }
      }
      }
      -->
      </script>
      <a href="test.htm? q=Da">A</a>
      <a href="test.htm? q=Db">B</a>
      <a href="test.htm? q=Dc">C</a>
      <div id="Da" style="visibili ty: hidden;">
      <p>Div A</p>
      </div>
      <div id="Db" style="visibili ty: hidden;">
      <p>Div B</p>
      </div>
      <div id="Dc" style="visibili ty: hidden;">
      <p>Div C</p>
      </div>
      <script type="text/javascript">
      <!--
      document.getEle mentById(queryS t('q')).style.v isibility = 'visible';
      -->
      </script>
      </body>
      </html>
      </code>

        Comment

        • RobG
          #3
          Re: Show/Hide div

          On Jun 21, 12:55 pm, BRitchie <ritchie.br...@ gmail.comwrote:
          On Jun 3, 5:15 pm, shapper <mdmo...@gmail. comwrote:
          >
          Hello,
          >
          In a simple HTML page, index.html, I have:
          - 3 anchors: A, B and C;
          - 3 divs: dA, dB and dC;
          >
          Each anchor should load, when clicked, index.html but anchor A should
          make dA visible and the other invisible, anchor B should show dB and
          hide the others.
          >
          How can I do this?
          >
          Thanks,
          Miguel
          >
          This was tested very quickly but works in IE 7.
          >
          It uses Javascript but you didn't specify a scripting language of
          choice.
          >
          <code>
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
          TR/html4/strict.dtd">
          <html lang="en">
          <head>
          <title>Dynami c Java Querystring</title>
          </head>
          <body>
          <script type="text/javascript">
          <!--
          HTML-style comment delimiters should not be used inside script
          elements.

                  function querySt(param) {
                          var loc = window.location .search.substri ng(1);
                          var query = loc.split("&");
                          for (i=0;i<query.le ngth;i++) {
                                  var currParam = query[i].split("=");
                                  if (currParam[0] == param) {
                                  return currParam[1];
                                  }
                          }
                  }
          -->
          That is incorrect even if the comment delimiters were useful, it
          should be:

          //-->

          </script>
          <a href="test.htm? q=Da">A</a>
          <a href="test.htm? q=Db">B</a>
          <a href="test.htm? q=Dc">C</a>
          <div id="Da" style="visibili ty: hidden;">
          <p>Div A</p>
          </div>
          <div id="Db" style="visibili ty: hidden;">
          <p>Div B</p>
          </div>
          <div id="Dc" style="visibili ty: hidden;">
          <p>Div C</p>
          </div>
          <script type="text/javascript">
          <!--
                  document.getEle mentById(queryS t('q')).style.v isibility = 'visible';
          -->
          The problem with this approach is that if the user has scripting
          disabled, or it isn't supported, they will not see any content. Much
          better to use the HTML class attribute to associate visibility, then
          use script to load the relevant style sheet to set the applicable rule
          and hide the elements.


          --
          Rob

            Comment

            Previous template Next
            Working...