Re: how to create a url that will open hidden divs

Giganews Newsgroups
Subject: Re: how to create a url that will open hidden divs
Posted by:  Jeremy J Starcher (r3j…@yahoo.com)
Date: Thu, 16 Apr 2009

On Thu, 16 Apr 2009 13:35:33 -0700, snorq wrote:

> Hi, all. I have a page that uses javascript and the "display" style
> property to show and hide divs. I want to be able to create a URL that
> people can click to open up the page with a certain div showing. Any
> suggestions on how to do that?
>
> Below is some sample code from the site. Is there a way craft a URL that
> will open the page with, say, the section2 div showing...?
>
> (Note that my skills aren't highly developed, so the code may not be as
> efficient as it could be.)
>
> Thanks for any help.
>
> Below is some sample code from the site. Is there a way craft a URL that
> will open the page with, say, the section2 div showing...?
>
> (Note that my skills aren't highly developed, so the code may not be as
> efficient as it could be.)
>
> Thanks for any help.
>
> ------------------------
> *FLAG SECTION 1 AS THE DEFAULT DIV TO SHOW*
function initialSection() {
>        document.currentSection = eval('document.getElementById
> ("section1")');
> }
>
> *SHOW THE NEW DIV, FLAG IT, HIDE THE OTHERS* function
> show(selectedSection) {
>        document.newSection = eval('document.getElementById
> (selectedSection)');
>        if (document.newSection.style.display == "none") {
>                document.newSection.style.display = "inline";
>                document.currentSection.style.display = "none";
>        }
>        document.currentSection = document.newSection;
> }
>
> *LINKS FOR SHOWING DIFFERENT SECTIONS* <A
> onClick="show('section1')">section1</A> <A
> onClick="show('section1')">section2</A> <A
> onClick="show('section1')">section3</A>
>
> *THE DIVS*
> <DIV id="section1" style="display: inline"> <DIV id="section2"
> style="display: none"> <DIV id="section3" style="display: none">

Your best bet is to scrap this code and begin over.  This is a fairly
easy script to code.

I don't normally provide code, but you were on the right track.  Thought
I'd give you an example of something fairly well-written and commented
about WHY I was changing things.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            http://www.w3.org/TR/html4/strict.dtd">

<head>
<title>Example</title>

<script type="text/javascript">

// Variables are declared.  'Var' keyword
var numDivs = 3;

function showDiv(divNumber)
{
  var i;

  /* Hide all of the divs */
  for(i = 0; i < numDivs; i++)
  {
    // No need for eval here.
    document.getElementById("content_" + i).style.display = "none";
  }

  /* Now, show the div we want */
  // Just setting the display to "" returns it to its default value
  document.getElementById("content_" + divNumber).style.display = "";

}

</script>

</head>

<body onload="showDiv(0)">

<!-- Show all of the divs to start off with.  That way, browsers without
Javascript will still display something useful -->

<div id="content_0">
  <p>Now is the time for all good men to come to the aid of their
country.</p>
</div>

<div id="content_1">
  <p>The quick brown fox jumped over the lazy dogs.</p>
</div>

<div id="content_2">
  <p>All your base are belong to us.</p>
</div>

<a href="#" onclick="showDiv(0)">Show div 0</a><br>
<a href="#" onclick="showDiv(1)">Show div 1</a><br>
<a href="#" onclick="showDiv(2)">Show div 2</a><br>

</body>
</head>

Replies

In response to

how to create a url that will open hidden divs posted by snorq on Thu, 16 Apr 2009