Yes, you can do that with jQuery. A simple example is below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".newsOne").hide();
$(".newsOneTrigger").show();
$('.newsOneTrigger').click(function(){
$(".newsOne").slideToggle();
});
$(".newsTwo").hide();
$(".newsTwoTrigger").show();
$('.newsTwoTrigger').click(function(){
$(".newsTwo").slideToggle();
});
$(".newsThree").hide();
$(".newsThreeTrigger").show();
$('.newsThreeTrigger').click(function(){
$(".newsThree").slideToggle();
});
});
</script>
<style>
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}</style>
<style>
#wrapper {
width: 980px;
margin: 0 auto;
overflow: hidden;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
}
#colOne, #colTwo, #colThree {
float: left;
height: 500px;
}
#colOne p, #colTwo p, #colThree p {
margin: 0;
padding: 5px 15px;
line-height: 20px;
}
#colOne h3, #colTwo h3, #colThree h3 {
margin: 0;
padding: 15px 15px 0 15px;
line-height: 20px;
}
#colOne {
width: 250px;
background-color:#CCC;
}
#colTwo {
width: 250px;
background-color:#999;
margin-left: 2px;
}
#colThree {
width: 478px;
background-color:#333;
color: #fff;
position: relative;
}
.newsOne, .newsTwo, .newsThree {
width: 478px;
height: 500px;
position: absolute;
top: 0;
left: 0;
background-color:#FF9;
color: #333;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="colOne">
<h3>News Article 1</h3>
<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. <a href="#" class="newsOneTrigger">Read More</a></p>
</div><!-- end colOne -->
<div id="colTwo">
<h3>News Article 2</h3>
<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. <a href="#" class="newsTwoTrigger">Read More</a></p>
<h3>News Article 3</h3>
<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. <a href="#" class="newsThreeTrigger">Read More</a></p>
</div><!-- end coltwo -->
<div id="colThree">
<div class="newsOne">
<p>News 1 article goes here <a href="#" class="newsOneTrigger">Close me</a></p>
</div>
<!-- end newsOne -->
<div class="newsTwo">
<p>News 2 article goes here <a href="#" class="newsTwoTrigger">Close me</a></p>
</div>
<!-- end newsTwo -->
<div class="newsThree">
<p>News 3 article goes here <a href="#" class="newsThreeTrigger">Close me</a></p>
</div>
<!-- end newsTwo -->
<h3 style="color: #fff;">About Us</h3>
<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
</div><!-- end colThree -->
</div><!-- end wrapper -->
</body>
</html>
