Display Div information in another location

**jimbowvu80s** · 08-16-2011, 05:45 PM

I am trying to modify this collapsible script so that in instead of each item that you click on be vertical I put them horizontal in a table. When the picture or text is clicked it will display below the pictures. This is a jquery collapsible script.

I put an id variable to reference the DIV that I'm tryting to open, but it doesn't seem to like that.

Thank you for any help.


<!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>Collapsible Message Panels</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function(){
$(this).next(".msg_body").slideToggle(600);
});
});
</script>
<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
p {
padding: 0 0 1em;
}
.msg_list {
margin: 0px;
padding: 0px;
width: 383px;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FFCCCC;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</style>
</head>
<body>
<div align="center">
<p>Click on the each news head to toggle
</p>

</div>
<div class="msg_list">

<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td><p class="msg_head" id="firstperson">Person #1 </p></td>
<td><p class="msg_head" id="secondperson">Person #2 </p></td>
<td><p class="msg_head" id="thirdperson">Person #3 </p></td>
</tr>
</table>
<div class="msg_body" id="firstperson">
orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>

<div class="msg_body" id="secondperson">
person #2 info --------------orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>

<div class="msg_body" id="thirdperson">
person #3-----orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>

</div>
</body>
</html>

**Deadweight** · 08-17-2011, 01:30 AM

Try wrapping it in UL and LI and make the style "BLOCK"
I think that is all you have to do also if need need me to explain just ask

**jimbowvu80s** · 08-17-2011, 03:53 PM

I came up with this, but it seems completely wrong. Can you explain? If I us an <a href "#" it displays the items horizontally, but won't display the "msg_body"

Thank you.





<ul class="inline:body">

<li class="msg_head">Person 1 </li><div class="msg_body">

			orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>

<li class="msg_head">Person 2</li><div class="msg_body">

			this is the second persons information...orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>

</ul>

**Minos** · 08-17-2011, 05:44 PM

what about something like:

Code:

<div class="msg_list">
 <span class="msg_head">Header 1</span>
 <div class="msg_body">Hi I am a message!</div>
</div>

**Deadweight** · 08-17-2011, 05:58 PM

One sec:
Are you wanting something like this but horizontal?
http://www.dynamicdrive.com/dynamici...edcollapse.htm

**jimbowvu80s** · 08-17-2011, 07:09 PM

Yes - exactly. I have three pictures of executives and I want a user to be able to click on the picture and their information will appear below them. I initially added tables, but when you click on a person the text appears directly below in the column of the table (it's restricted by the table width and doesn't look great.

**jimbowvu80s** · 08-17-2011, 07:16 PM

Minos is onto something. I tested this and it almost works. When you click on "Header 1" the "Header 2" wraps down and appears below the revealed text of "Header 1"

<div class="msg_list">
<span class="msg_head">Header 1</span>
<div class="msg_body">Hi I am a message!</div>
<span class="msg_head">Header 2</span>
<div class="msg_body">I am a message---#2!</div>
</div>

**Deadweight** · 08-17-2011, 07:20 PM

Umm i think you might have to do something like this:

Code:

<div class="msg_list">
<div class="msg_body"><span class="msg_head">Header 1</span>
Hi I am a message!</div>
<div class="msg_body"><span class="msg_head">Header 2</span>
I am a message---#2!</div>
</div>

I can be wrong and i will look it up later if that doesnt work

**Minos** · 08-17-2011, 07:31 PM

Ah...I misunderstood as well. In that case, you were close, try this:

Code:

	<div class="msg_list">
		<table width="100%" border="0" cellspacing="1" cellpadding="1">
		<tr>
			<td><p class="msg_head" id="firstperson">Person #1 </p><div class="msg_body">Data 1</div></td>
			<td><p class="msg_head" id="secondperson">Person #2 </p><div class="msg_body">Data 2</div></td>
			<td><p class="msg_head" id="thirdperson">Person #3 </p><div class="msg_body">Data 3</div></td>
		</tr>
		</table>
	</div>

And actually, you could probably just use <td class="msg head"> instead of using the <p> tag.