Question

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.