OnPage Load display one sentence - hide others

Question

Hi

I have created http://techavid.com/design/test3.html and when you load the page you see there are 3 images. The sun image is focused(in color), while the others are greyed out until clicked. That is how it should be for the images.

Under each image you see a sentence 1st: Sun, 2nd: Airplane & 3rd: Nano, but when page loads you see all three sentences. How to make it so when page loads the first sentence underneath the active image (sun) shows only and the others do not show, they only show when clicked (though that works just need to figure out onpage load only show "1st: Sun")?

thanks :)

paul J.

Answer 1

If you'd put the first two links in a span (like you do with the other two sets of links), this should work:

$('#popuptext span:not(:first) a').hide();

The proposed HTML would look something like this:

<div id="popuptext">
    <span class="suntext"> <!-- add this -->
        <a href="#" rel="sun">1st:</a>
        <a href="#" rel="sun">Sun</a>
    </span> <!-- and this -->
    <span class="planetext">
        <a href="#" rel="plane">2nd:</a>
        <a href="#" rel="plane">Airplane</a>
    </span>
    <span class="nanotext">
        <a href="#" rel="nano">3rd:</a>
        <a href="#" rel="nano">Nano</a>
    </span>
</div>

• http://api.jquery.com/first-selector/
• http://api.jquery.com/not-selector/

Edit Sorry, I haven't looked at your code close enough. You have to change the selector from #popuptext span:not(:first) to #popuptext span:not(:first) a, then it works correctly. Also note my comment below.

Answer 2

Your javascript code hide elements on the page by setting their style to display: none.

I guess the simplest way to hide some elements by default is to explicitly set this style on them by editing the HTML or a CSS file.

You may also want to try visibility: hidden which doesn't affect the document flow.

Answer 3

The simple way is to wrap the sentence in an element of its own (e.g. ) and toggle visibility of it using CSS. (and a bit of JavaScript).

For instance assuming that the images are in a li element with class names imageBox:

li.imageBox span.imageCaption {
  /* set style options */
}
li.imageBox.active span.imageCaption {
  /* use different style options */
}

Answer 4

$(document).ready(function(){ $(".planetext").hide(); $(".nanotext").hide(); }

Is that what you're asking?