[thastrom]

how do I make this one button ? It's one slide down and one slide up button now I want just one that does both.

Here's the code:

<a href="#" onclick="Effect.BlindUp('d1');; return false;" >Slide Down</a> <a href="#" onclick="Effect.BlindDown('d1');; return false;">Slide Up</a>

[xENo]

The code doesn't really make sense out of context like that.

Do you have a link?

[thastrom]

how about now ?

<div class="style11" id="d1" style="display:none;">
<span class="style14">E-mail:</span> text1
<span class="style14">Msn:</span> text2
<span class="style14">AIM:</span> text3</div>
      <div align="center"><span class="style11"><a href="#" onclick="Effect.BlindUp('d1');; return false;" >Slide Down</a> <a href="#" onclick="Effect.BlindDown('d1');; return false;">Slide Up</a></span>
        </p>
    </div

[xENo]

We're gettin there. Where's the rest of the javascript?

A lot of times these things can be simple syntax errors, and people don't even paste the problem... so its hard to see without a link to a full page.

[thastrom]

Now ?

<script src="javascripts/prototype.js" type="text/javascript"></script>
<script src="javascripts/scriptaculous.js" type="text/javascript"></script>
<style type="text/css" media="screen">
  /* <![CDATA[ */
    #d1 { background-image: url(BG-Svart.png); width: 190px; }
  /* ]]> */
  </style>
<div class="style11" id="d1" style="display:none;">
<span class="style14">E-mail:</span> Text1
<span class="style14">Msn:</span> Text2
<span class="style14">AIM:</span> Text3</div>
      <div align="center"><span class="style11"><a href="#" onclick="Effect.BlindUp('d1');; return false;" >Slide Down</a> <a href="#" onclick="Effect.BlindDown('d1');; return false;">Slide Up</a></span>
        </p>

sorry I don't have a link.

[xENo]

Ok, the easiest way would be to have both of those, but hide one and show the other... then when it changes, show one and hide the other.

You can do that by wrapping each in their own element, like a span with an id. Then hide one by default with a CSS class. When you click the one thats shown, change the class on the hidden one to make it show up, and then change the class on the one you clicked to hide it. They should appear to be just one link that updates.

Something like this... this may not work but it should help to get you close.

<style>
.hidden {
	display: none;
}
</style>

<div align="center">
	<span id="downlink" class="style11"><a href="#" onclick="Effect.BlindUp('d1'); $( 'downlink' ).addClassName( 'hidden' ); $( 'uplink' ).removeClassName( 'hidden' ); return false;" >Slide Down</a></span>
	<span id="uplink" class="style11 hidden"><a href="#" onclick="Effect.BlindDown('d1'); $( 'downlink' ).removeClassName( 'hidden' ); $( 'uplink' ).addClassName( 'hidden' ); return false;">Slide Up</a></span>
</div>

[thastrom]

yep, it worked ! thanks !