Can independently show/hide. How do I hide on show?

I have been attacking this for two weeks.

I have found a way to toggle the show/hide. But each image is over the top of the next, so if the open image isn't closed, no other toggled image will show because they are underneath it.

Here is the basic js:

<script type="text/javascript">
animatedcollapse.ontoggle=function($, divobj, state){ 
}
animatedcollapse.init()
</script>

<script type="text/javascript">
animatedcollapse.addDiv('profile','hide=1')
animatedcollapse.addDiv('photo','hide=1')
animatedcollapse.addDiv('sabout','hide=1')
animatedcollapse.addDiv('copy','hide=1')
animatedcollapse.init()
</script>

It is used here as follows:

<div align="center">
    <a href="javascript:animatedcollapse.toggle('profile')" title="Profile" border="0">< img src="img here.png" srcover="img here" srcdown="img here" height="50px" width="96px"></a>
</div></div>

<div id="mask">

    <div id="profile" class="nah">
        <a name="profile"></a>
        <div class="contentp">
        <div align="center">
        <div class="close"><div align="right"><a id="aclose" href="javascript:animatedcollapse.toggle('profile')" title="Close"><span>CLOSE ME</span></a></div></div>

   开发者_高级运维         < img src="img here" border="0">

        </div></div>
    </div>

Multiply that by the number of "pages". A "page" is another image inside a div that is called, slides down into place to be viewed, and is put away when close is clicked. I want to get rid of the close button and just have the current div hide when another div is toggled. Is this possible?

To get the full feel of it, here is the start of my personal hell: http://www.lantiis.com .. I really just want a nice simple mini-site that flows and is easy to navigate for the extreme beginner. Right now, even intermediate users are confused by the close button and apparently don't know to click it (so they only ever see the first image for PROFILE) ...

All help and leads are appreciated. Lantiis

---

I noticed that you're including jQuery (and you have tagged it) on your site, so I'll suggest a jQuery solution. Just to elaborate a bit more on zod's response.

$(document).ready(function () {
  $('#idOfYourMenuItem').click(function () {
    //Hide the other images
    hideAll();

    //Show the image that you want
    $('#divOfTheRelatedImage').show();
  }
  //Bind your other menu items here
  //$('#idOfYourMenuItem2').click  etc...

  hideAll();

  //Show your first page here somewhere
  $('#divOfFirstPage').show();
});

function hideAll() {
  $('#divOfTheRelatedImage').hide();
  $('#divOfTheRelatedImage2').hide();
}

This is a very simple approach and should help you get started. If you need more help let me know.

---

Try using jquery .show .hide or .toggle

you can try addClass for adding the class to hide which evr div you want or show

http://api.jquery.com/show/

http://api.jquery.com/hide/

http://api.jquery.com/toggle/

http://api.jquery.com/addClass/

your website looks simple and nice :-)

---

Do you want a simple tab navigation ?

Take a look at this: http://www.kminek.pl/lab/yetii/ or search the web for "tab navigation javascript"

Inline javascript IS BAD read more about unobstrusive javascripting here:

• http://www.catswhocode.com/blog/best-practices-for-modern-javascript-development
• http://www.javascripttoolbox.com/bestpractices/

And as advised in another post, you could benefit from the use of a library, in this case, jquery. Read some more about jquery here: http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/

---

I think it would make your life fairly easy to use jQuery and use the titles of the <a> tags your users are clicking on as keywords that show and hide divs which have id's of the same name. This makes it easier to keep track of what's going on and to add/remove items really easily.

The script is:

$('#mask > div:first-child').show();
$('#top a').click( function() {
    var keyterm = $(this).attr('title');
    $('#mask > div').hide();
    $('div[id=' + keyterm + ']').slideDown('slow');
}); 

I've posted a simplified version of your html to a jfiddle so you can see it working (jfiddle)

Note that for this approach to work, you'll have to make minor edits to the names of the divs you're toggling in the "mask" div, so that they match the titles of the <a> tags you're clicking on (so 'copyright' should match 'copyright' etc.)