If you really want a slider effect, you'll need something like JQuery (though not Ajax unless you want to populate part of it with a php script in a separate file).
If you just want replacement, by far the fastest way is to just use an OnClick() event to call a JS function that changes the class of the div, with CSS like this (untested):
HTML:
<button id="btn" onclick="swap()">Click me</button>
<div id="div1" class="show">
blah, blah, blah
</div>
<div id="div2" class="hide">
blah, blah, blah
</div>
CSS:
div.show {
display: block;
}
div.hide {
display: none;
}
JS:
function swap() {
document.getElementById("div1").className = "hide";
document.getElementById("div2").className = "show";
}
Theoretically, you can skip the JS function altogether with this in the button HTML:
<button onclick="document.getElementById("div1").className = "hide";document.getElementById("div2").className = "show";">Click Me</button>
In JQuery, this should do a nice fade with the HTML and CSS at the top:
$('#btn').click(function(e){
$('#div1').fadeOut('slow', function(){
$('##div2').fadeIn('slow');
});
});
You can also use slideUp() and/or slideDow() instead of fade().
[ed. note: BobRay last edited this post 13 years, 2 months ago.]
☆ A M B ☆