PDA

View Full Version : Expandible Titles in HTML


Chapo
11-07-2011, 12:55 AM
ok... I'm creating a site wich has a lot of annoying medical text. So i decided to create a title (read more) and that will expand with the entire text, when clicked again it will colapse. All this will happen in the same page, no need to click the title and go to another page to read more. How can i do this ?

Here is an example:
http://www.sanpatriciomrict.com/EventosyNoticias/Art%C3%ADculos/tabid/76/Default.aspx

DWcourse
11-07-2011, 02:11 AM
Something like this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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(){

$(".slidingDiv").hide();
$(".show_hide").show();

$('.show_hide').click(function(){
$(".slidingDiv").slideToggle(600);
});

});

</script>

<style type="text/css">
.slidingDiv {
height:300px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
border-bottom:5px solid #3399FF;
}

.show_hide {
display:none;
}
</style>
</head>

<body>

<h4 class="show_hide">More</h4>

<div class="slidingDiv">
Additional content goes here
</div>

</body>
</html>

Chapo
11-07-2011, 08:45 PM
Thats a nice effect... thanks

DWcourse
11-08-2011, 03:01 AM
I just found that for a client's site so it was handy. Glad I could help.