Display Div information in another location [Archive]

View Full Version : 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:

<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/dynamicindex17/animatedcollapse.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:

<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:

<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.

jimbowvu80s

08-17-2011, 07:53 PM

Is there a way to have the "msg_body" appear below the table for any <td> selected?

Minos

08-17-2011, 07:57 PM

Hmm, below the entire table itself? Yes, it is possible...I'm trying to visualize why you would need to...I guess I'm still trying to figure out the effect you want.

Do you mean for it to look like

PI PI PI
CT CT CT
I am a message
about whichever
picture.

jimbowvu80s

08-17-2011, 08:38 PM

Yes.

Picture1 Picture2 Picture3 Picture4
-------------------------------------

I clicked on Picture #3 and this is text for Picture # 3. To appear below the
table of pictures.

-------------------------------------------------------

Does that help? I was trying to put an id to reference in the different classes, but that didn't work.

Minos

08-17-2011, 09:51 PM

It does. Here you go:

The new 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(){
$(".msg_body").hide();
$($(this).attr("href")).slideToggle(600);
});
});
</script>

The HTML:

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

jimbowvu80s

08-18-2011, 01:43 PM

That works perfectly. Thank you.

I added the following to the end of the script so that when you click again on the picture it will collapse the text, but instead it reloads the "msg_body" - $($(this).attr("href").hide);

or add a new function to collapse the text?

$(".msg_body").hide();
$("href").click(function ( event ) {
event.preventDefault();
$(this).hide();
});

<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(){
$(".msg_body").hide();
$($(this).attr("href")).slideToggle(600);
$($(this).attr("href").hide);
});
});
</script>

Minos

08-18-2011, 02:12 PM

Try:

<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(){
if ($($(this).attr("href")).is("visible")){$(".msg_body").hide(); return;}
$(".msg_body").hide();
$($(this).attr("href")).slideToggle(600);
$($(this).attr("href").hide);
});
});
</script>

Honestly, I haven't sat down and taught myself jquery yet so this is new to me :)

jimbowvu80s

08-18-2011, 03:05 PM

That didn't work. When you click the image after it expands it reloads the the information.

I think we're getting beyond the CSS forum; I'll work on it later. I appreciate your help with this.

Thanks.