Erweiterten Text innerhalb der gleichen Seite auf Klick einblenden?

Ich weiß ja nicht, wo genau du die Tabelle gesetzt hast, aber im nachfolgenden Markup des downloadbaren Beispiels (http://www.stunicholls.com/zip/more.zip), ändert sie bei mir nichts an der Funktionalität:

Code:
<div id="outer">
<table><tr><td>
<div class="holder">
<h2>Alice's Adventures in Wonderland</h2>
<p class="bold">by Lewis Carroll</p>
<p class="bold">Down the Rabbit-Hole</p>
<p>ALICE was beginning to get very tired of sitting by her sister on the bank and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?'</p>
<div class="more">
<i class="show">more »</i>
<i class="hide">« less</i>

<br />
<img src="more/rabbit.jpg" alt="rabbit" title="" />
<p>So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself "Oh dear! Oh dear! I shall be too late!" (when she thought it over afterwards it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but, when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and was just in time to see it pop down a large rabbit-hole under the hedge.</p>

</div> <!-- end of more -->
</div> <!-- end of holder -->
</td></tr></table>

</div> <!-- end of outer -->

Auch hier gibt's keine Probleme:

Code:
<div id="outer">

<div class="holder">
<table><tr><td>
<h2>Alice's Adventures in Wonderland</h2>
<p class="bold">by Lewis Carroll</p>
<p class="bold">Down the Rabbit-Hole</p>
<p>ALICE was beginning to get very tired of sitting by her sister on the bank and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?'</p>
<div class="more">
<i class="show">more »</i>
<i class="hide">« less</i>

<br />
<img src="more/rabbit.jpg" alt="rabbit" title="" />
<p>So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself "Oh dear! Oh dear! I shall be too late!" (when she thought it over afterwards it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but, when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and was just in time to see it pop down a large rabbit-hole under the hedge.</p>

</div> <!-- end of more -->
</td></tr></table>
</div> <!-- end of holder -->

</div> <!-- end of outer -->

Und auch hier kann ich keine Einbußen feststellen:

Code:
<div id="outer">

<div class="holder">
<h2>Alice's Adventures in Wonderland</h2>
<p class="bold">by Lewis Carroll</p>
<p class="bold">Down the Rabbit-Hole</p>
<p>ALICE was beginning to get very tired of sitting by her sister on the bank and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?'</p>
<div class="more">
<table><tr><td>
<i class="show">more »</i>
<i class="hide">« less</i>

<br />
<img src="more/rabbit.jpg" alt="rabbit" title="" />
<p>So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself "Oh dear! Oh dear! I shall be too late!" (when she thought it over afterwards it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but, when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and was just in time to see it pop down a large rabbit-hole under the hedge.</p>
</td></tr></table>
</div> <!-- end of more -->

</div> <!-- end of holder -->

</div> <!-- end of outer -->



mfg Maik
 
Hallo,
was meinst du mit Klassen integriert?

Hier ist der Quelltext dazu:

<div id="outer">

<div class="holder">
<h2>Vita - Klaus Huntscha</h2>
<p><strong>Klaus Huntscha - </strong><span class="text_highlight_blue">Heilpraktiker</span></p>
<p>Jahrgang: 1974,
Geburtsort: Alf/Mosel (Kreis Cochem-Zell),
Sternzeichen: Steinbock</p>
<p><strong>Inhaber des European Diploma of Holistic Bioenergetic Medicine.</strong></p>
<div class="more">
<i class="show">vollst&auml;ndige Vita »</i>
<br />
<i class="hide">« ausblenden</i>
<table width="420px">
<tr>
<td width="120px">1990 – 1993</td>
<td width="20px">&nbsp;</td>
<td width="280px">1. Beruf Koch</td>
</tr>
<tr>
<td width="120px">1999 – 2001</td>
<td width="20px">&nbsp;</td>
<td width="280px">2. Beruf Rettungsassistent</td>
</tr>
<tr>
<td width="120px">2001</td>
<td width="20px" colspan="2">Fortbildungen:</td>
</tr>
<tr>
<td width="120px">&nbsp;</td>
<td width="20px">&nbsp;</td>
<td width="280px">zum Ausbilder im Rettungsdienst (Lehrrettungsassistent)<br />
zum Kriseninterventionsberater Rettungsdienst</td>
</tr>
<tr>
<td width="120px">2001 – 2004</td>
<td width="20px">&nbsp;</td>
<td width="280px">Vollzeitausbildung zum Heilpraktiker an der Hessischen Heilpraktikerfachschule Rhein-Main in Hochheim</td>
</tr>
<tr>
<td width="120px">&nbsp;</td>
<td width="20px" colspan="2">Leistungskurse:</td>
</tr>
<tr>
<td width="120px">&nbsp;</td>
<td width="20px">&nbsp;</td>
<td width="280px">
Chiropraktik/Osteopathie, Homöopathie<br />
Interessenschwerpunkte:<br />
Irisdiagnose,<br />
Ohrakupunktur<br />
Humoraltherapie (=ausleitende Verfahren),<br />
Ernährungsmedizin<br /></td>
</tr>
<tr>
<td width="120px">2003</td>
<td width="20px">&nbsp;</td>
<td width="280px">Im Oktober 2003 wurde ich durch das Landesgesundheitsamt im Mainz geprüft und erhielt die „Erlaubnis zur Ausü bung der Heilkunde“ durch die Kreisverwaltung Cochem-Zell und bin somit seitdem als Heilpraktiker zugelassen</td>
</tr>
<tr>
<td width="120px">2005</td>
<td width="20px" colspan="2">Fortbildungen:</td>
</tr>
<tr>
<td width="120px">&nbsp;</td>
<td width="20px">&nbsp;</td>
<td width="280px">in Irisdiagnose, Spenglersan-Kolloid-Therapie und biomolekulare Therapie</td>
</tr>
<tr>
<td width="120px">2006</td>
<td width="20px" colspan="2">Fortbildungen:</td>
</tr>
<tr>
<td width="120px">&nbsp;</td>
<td width="20px">&nbsp;</td>
<td width="280px">Ernährungsmedizin mit dem Schwerpunkten:<br />
Behandlungen von Adipositas (Übergewicht) und Stoffwechselentgleisungen (Diabetes mellitus, Metabolisches Syndrom, Fettstoffwechselstörungen)<br />
Behandlung von Nahrungsmittelallergikern<br />
Behandlung von Sportlern<br />
Beginn der Fortbildung über bioenergetische Medizin (Bioresonanztherapie und Elektroakupunktur nach Voll)</td>
</tr>
<tr>
<td width="120px">2007</td>
<td width="20px" colspan="2">Fortbildungen:</td>
</tr>
<tr>
<td width="120px">&nbsp;</td>
<td width="20px">&nbsp;</td>
<td width="280px">Bioenergetische Medizin (Bioresonanztherapie und Elektroakupunktur nach Voll) mit dem Abschluss und der Verlei hung des European Diploma of Holistic Bioenergetic Medicine<br />
Fortbildung in der Behandlung von Krebserkrankungen mit Hilfe der Bioresonanztherapie (Ausbildungsort Schweiz)<br />
Fortbildung in der psychotherapeutischen Gesprächstherapie nach den Richtlinien von EPT (Ethisch Philosophischer Therapie) (Ausbildungsort Österreich)<br />
Fortbildungen in der Anwendung von kinesiologischen Techniken in der Bioresonanztherapie (Ausbildungsort Niederlande)
</tr>
<tr>
<td width="120px">2008</td>
<td width="20px" colspan="2">Fortbildungen:</td>
</tr>
<tr>
<td width="120px">&nbsp;</td>
<td width="20px">&nbsp;</td>
<td width="280px">Psychophysiognomik und Pathophysiognomik bei Frau Wilma Castrian<br />
Psychokinesiologische Testung und Behandlung von Blockaden bei Herrn Dr. Klinghardt<br />
Neue Therapieansätze in der Fußreflexzonentherapie nach Frau Hanne Marquardt<br />
Ausbildung zum Ozon-Therapeuten bei der Heilpraktikergesellschaft für Ozontherapie (HPGO3) mit Abschlusszertifikat „Blaue Karte“ (Ausbildungsort Mainz)<br />
Fortbildung zur Durchführung der Colon-Hydro-Therapie
</tr>
</table>-->
</div> <!-- end of more -->
</div> <!-- end of holder -->
 
Die Texte innerhalb der einzelnen Tabellenzellen müssten gemäß dem Stylesheet weiterhin in einem <p>-Tag eingebettet sein, damit ihr Ein- und Ausblenden funktioniert, ansonsten erweiter das Stylesheet (hier das Original) folgendermaßen:

Code:
/* unclicked style div.more */
#outer div.more i {float:right; margin-right:-10px 10px 0 0; cursor:pointer; color:#c00; font-weight:bold;}
#outer div.more i.hide {display:none;}
#outer div.more p {display:none;}
#outer div.more img {display:none;}
#outer div.more table {display:none;}

/* clicked style div.click */
#outer div.click i.show {display:none;}
#outer div.click i.hide {display:block;}
#outer div.click p {display:block;}
#outer div.click img {display:block; float:left; padding-right:10px;}
#outer div.click table {display:block;}


Achja, in den HTML-Attributen wird keine px-Einheit angegeben, denn die gilt dort automatisch:

Code:
<table width="420px">

mfg Maik
 
Zurück