how to create a collapsible DIV ?

[dannybrazil]

Hello

i wanted to know how can i create a collapsible DIV in my PHP page.

 

i have there a table that in one of the colums you have the TITLE as a link (im not sure yet how to continue from here) that i want this to happen when u press it :(doesnt matter what exactly)

-to press on the title link and the whole message will open it self in a collapsible DIV

or

-some how that the whole posting plus all information given by the user will show there

 

the thing is that the page is already PHP and i dont know how to add something for the link to do what i want

 

i hope im explaning my self ok

 

thanks

 

something like in this site : www.craigslist.com

but here i see that they actualy created a number for each post or something like that and it automaticaly created an HTML page for it

 

[rhodesa]

how about something like:

 

<script type="text/javascript">
  function doToggle ( ele_id ) {
    var ele = document.getElementById(ele_id);
    if(ele)
      ele.style.display = (ele.style.display == 'block') ? 'none' : 'block';
    return false;
  }
</script>
<table>
<?php
  //I assume you do a query to get your titles
  //That would be done here
  $num = 0;
  while($row = mysql_fetch_assoc($result)){
    $key = 'unique_key_'.$num;
?>
<tr>
  <td>
    <a href="#" onclick="return doToggle('<?php echo $key;?>');"><?php echo $row['title'];?></a><br />
    <div id="<?php echo $key;?>" style="display:none;">
      Put all your stuff here like <?php echo $row['details'];?>
    </div>
  </td>
  <td>More info: <?php echo $row['date'];?></td>
</tr>
<?php
  }
?>
</table>

[dannybrazil]

wow...thanks , im realy new at this and i wonder if u can help me more

this is my code ( simple as it is for now cus im improving it always) :

 

<?php

// Make a MySQL Connection

 

// Get all the data from the "example" table

$result = mysql_query("SELECT * FROM _Form_Nr_3");

 

 

 

echo "<table border='1'>";

// keeps getting the next row until there are no more to get

 

 

 

while($row = mysql_fetch_array( $result )) {

// Print out the contents of each row into a table

echo "<tr><td>";

echo '<a href="' . $b . '">' . $row['posting_title'] . '</a>'; // $b i was wondering about the link

echo "</td></tr>";

}

 

echo "</table>";

?>

 

so where exactly i can add what you wrote me up

 

thanks

 

[rhodesa]

First, when posting code, use the CODE button on the toolbar, it is the one with the # sign

 

I also forgot a $num++ in my last post...here it is mixed in:

 

<script type="text/javascript">
  function doToggle ( ele_id ) {
    var ele = document.getElementById(ele_id);
    if(ele)
      ele.style.display = (ele.style.display == 'block') ? 'none' : 'block';
    return false;
  }
</script>
<?php
// Make a MySQL Connection

// Get all the data from the "example" table
$result = mysql_query("SELECT * FROM _Form_Nr_3");
echo "<table border='1'>";
// keeps getting the next row until there are no more to get
$num = 0;
while($row = mysql_fetch_array( $result )) {
  $key = 'unique_key_'.$num;
  // Print out the contents of each row into a table
  echo "<tr><td>";
  echo '<a href="#" onclick="return doToggle(\''.$key.'\');">'.$row['posting_title'].'</a><br />';
  echo '<div id="'.$key.'" style="display:none;">';
  //Put whatever you want to go inside the DIV here
  echo "</div></td></tr>";
  $num++;
}
echo "</table>";
?>

[dannybrazil]

hi man , thanks alot i appreciate your help !

 

can i ask you more stuff in the future ?

 

* regarding //Put whatever you want to go inside the DIV here

it will have to be as :

echo "what ever i want to put" ?

 

can it be echoing the rest of the database ?

 

thanks again

[rhodesa]

Sure, you can always ask, but I may not always be available to respond right away. There are a lot of great people on here to help you, so I would just keep all future questions as posts on the forum. If I'm on, I'll see them there.

 

Yes, you will have to use echo.

 

What do you mean by "rest of database"? I assume you have more info in that row of the table? Maybe a column called 'posting_description' you would like to put in the DIV. In that case, just put this in there:

echo $row['posting_description'];

 

[dannybrazil]

hi

yep thats what i meant , and now it ok...thanks again

 

i have a problem noe that i dong know how to solve and im sure that its not 100% PHP

 

my first question will be :

 

can the collapsible text be in a box that i can choose the exact size ? (cus when some one will type alot of words the table expends all over the page and its ugly)

 

can i define a definite size for my table and like that the heigh only with changr and all the text will drop down olny and not to the side ?

 

 

thanks again

[dannybrazil]

in other words , can i define the colum width ? (for each colum separately)

[rhodesa]

Yup, that is all CSS. You can specify the width of each TD manually, and the DIV will stay within that (expanding vertically downward to show everything).

[dannybrazil]

hi

im not getting the desire effect i want with the WIDTH of the colum after the DIV is opening

im addint the the <td> the width option ( <td style="width:100px;">) and its all good

but when im clicking it it opens as much as the text was inserted size

 

hmmmm....im stuck here

[rhodesa]

In addition, trying making the DIV line this:

 

echo '<div id="'.$key.'" style="display:none;width:100px;">';

[dannybrazil]

i added it....but it doesnt work

 

 

[rhodesa]

Can you attach a screen shot of what it looks like, and the source when you do View Source on the page? Just use the Additional Options feature and add them as attachments.

[dannybrazil]

well ....lets try

here is the peice of code :

$num = 0;

while($info = mysql_fetch_array( $data )) {
// Print out the contents of each row into a table
$key = 'unique_key_'.$num;

echo "<tr><td>"; 
echo '&nbsp'.$info['Submission_Date'];
echo '</td>'.'<td style="width:400px;">';
  echo '<a href="#" onclick="return doToggle(\''.$key.'\');">'.$info['posting_title'].'</a><br />';
  echo '<div id="'.$key.'" style="display:none;">';
  
  echo $info['posting_discription'];

  
  echo "</div>";
echo "</td><td>";
echo '&nbsp'."(".$info['living_area'].")";
echo "</td></tr>"; 
$num++;
} 

echo "</table>";

 

i tried to add almost anything i could think about and nothing happend it still looks like that after the page loads up i tried to attach pic here but didnt find the option

 

instead of looking like that :

before :

date        title

****      ************

after:

date        title

****        ***********

                ************************************************************

instead of :

date                  title

*****              ***********

                        *********************

                        *********************

                        *********************

 

 

thanks again

[dannybrazil]

can u also try to explain more about this line :

$key = 'unique_key_'.$num;

echo '<div id="'.$key.'" style="display:none;">';

 

what is the unique_key ? and all

[rhodesa]

So wait, you DO want it to wrap or you DON'T want it to wrap? I tried what you posted and it wraps just fine for me.

 

That key is needed for the JavaScript. In the JS, we need to get the DIV element so we can toggle it's display status (hidden/showing). The easiest way to get that element is with document.getElementById(). But, to use that function the DIV element needs a unique id set for it. If we had a unique id for each row, we could use that, but it's just as easy to create one. So, each time the loop runs, it will create the string of text 'unique_key_1' then 'unique_key_2', etc. You can change 'unique_key_' to something else if you want, I just made that up for the example. The only requirement is that the generated string contains only letters, numbers and underscores and also starts with a letter.

 

 

p.s. - If you DON'T want it to wrap, take out the width=400px style on the TD, and change the DIV line to this:

echo '<div id="'.$key.'" style="display:none;white-space:nowrap;">';

[dannybrazil]

hi

well did it with your line of cide without the 400px but doesnt work the table colum still expends as much

as the paragraph is and not breaking when its reaching the colum original size....

 

thats sooo wierd