Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Display Div information in another location

  1. #1
    Join Date
    Oct 2009
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Display Div information in another location

    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.

    <!--//---------------------------------+
    // Developed by Roshan Bhattarai |
    // http://roshanbh.com.np |
    // Fell Free to use this script |
    //---------------------------------+-->
    <!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>

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    372
    Thanks
    5
    Thanked 34 Times in 32 Posts

    Default

    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

  3. #3
    Join Date
    Oct 2009
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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>

  4. #4
    Join Date
    Dec 2004
    Posts
    177
    Thanks
    0
    Thanked 18 Times in 17 Posts

    Default

    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>
    Verzeihung!

  5. #5
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    372
    Thanks
    5
    Thanked 34 Times in 32 Posts

    Default

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

  6. #6
    Join Date
    Oct 2009
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Oct 2009
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    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>

  8. #8
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    372
    Thanks
    5
    Thanked 34 Times in 32 Posts

    Default

    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

  9. #9
    Join Date
    Dec 2004
    Posts
    177
    Thanks
    0
    Thanked 18 Times in 17 Posts

    Default

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

  10. #10
    Join Date
    Oct 2009
    Posts
    26
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

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

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •