• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Text bei Klick aufklappen

M

mari87

Neues Mitglied
Hallo zusammen,
ich habe mal wieder eine Frage...

Ich möchte in meine HP einbauen, dass wenn man auf ein Wort klickt, der Text erst weiter aufgeklappt wird. Also nicht in einer neu geladenen Seite, sondern einfach auf der selben Seite drunter.

Kann mir jemand helfen???

Vieeelen Dank schon mal!

Mari :razz:
 
Hm, ich finde da leider nix, das ich verstehe. Bin noch nicht sooo geübt mit HTML etc. Wäre für Hilfe sehr dankbar :-D
 
Achso, ich dachte du wolltest was animiertes haben.

Elemente einfach ausblenden und wieder einblenden geht mit display: block und display: none; wie du ja bereits gefunden hast.
 
mari87 schrieb:
Bin doch fündig geworden. Wen's interessiert... homepage-forum.de - Berechtigungsproblem
Zum Vergrößern anklicken....


Hallo zusammen.
Ich weis, das Thema ist älter, aber genau das suche ich.
Nur mein Problem ist folgendes:
Ich gebe Daten aus einer MySQL-Datenbank aus. Einen Teil dieser Daten will ich halt erst nach nem Klick auf 'Anzeigen' anzeigen. Habe das aus dem Link eingebaut, allerdings passiert nach dem Klick auf 'Anzeigen' nichts..

Mein Code ist folgender:

PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <!-- Javascript -->
        <script type="text/javascript">
            function showHideLayer(id){
                e = document.getElementById(id);
                if(e.style.display=="block"){
                    e.style.display = "none";
                } else {
                    e.style.display = "block";
                }
            }
        </script> 
</head>
  <body>
<?php

include('db_connect.php');

$sql = "SELECT * FROM pwvz ORDER BY Wovon";
$result = mysql_query ($sql);
echo "<table border='1' class='tab_mitte'>";
  while($data = mysql_fetch_array ($result)){
    echo "<tr>
      <td>".$data['Wovon']."</td>
      <td>".$data['User']."</td>
      <td>".$data['Mail']."</td>
      <td><a href='alternativerLink' onclick='showHideLayer('meinLayer');return(false)'>Anzeigen</a><div id='meinLayer' style='display:none;'>".$data['Passwort']."</div></td>
    </tr>";                                       
  }
  echo "</table>";
?>
  </body>
</html>
 
HTML: 
<html>
<head>
<script language="javascript" type="text/javascript">
function toggleNode(node) 
      {
        var nodeArray = node.childNodes;
        for(i=0; i < nodeArray.length; i++)
        {
          node = nodeArray[i];
          if (node.tagName && node.tagName.toLowerCase() == 'div')
            node.style.display = (node.style.display == 'block') ? 'none' : 'block';
        }
      }
</script>
</head>
<body>
<div  style="border:1px solid green;width:100px;  text-align:center"><p onclick="toggleNode(this.parentNode); return  false;">klick mich</p>
<div style="display: none;" border="1px"><p>da bin ich!</p><br></div></div>
</body>
</html>


kopier es mal hier rein http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_slidetoggle und klick auf 'edit and click me' !

meinst du sowas?
 
Hey. Ich bin über Google auf diesen Thread gekommen weil ich ein Problem habe. Ich habe den Code von noxTo benutzt und bin recht zufrieden mit dem Ergebnis. Allerdings würde ich gerne wissen ob es möglich ist, irgendwie einzustellen, dass man die aufklappbaren Links direkt nebeneinander setzen kann, und wenn man sie aufklappt, sie automatisch an Seite gehen. Hm, schwierig das zu erklären.^^ Mein aktueller Code sieht so aus:

Code: 
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<meta name="author" content="J&uuml;rgen Asendorf">
<title>Hey, wenns dir nicht gefällt, mach neu. </title>
<meta name="expires" content="20 days">
<meta name="revisit" content="after 21 days">
<meta name="page-type" content="beschreibung, anleitung,private homepage">
<meta name="audience" content="studenten,sch&uuml;ler,anf&auml;nger,alle">
<meta name="robots" content="INDEX,FOLLOW">

<script>
<!--
function BlurLinks(){
lnks=document.getElementsByTagName('a');
for(i=0;i<lnks.length;i++){
lnks[i].onfocus=new Function("if(this.blur)this.blur()");
}
}

onload=BlurLinks;
-->
</script>
<!--Ein Entfernen des Copyright-Vermerks kann rechtliche Schritte nach sich ziehen.-->
<!--(c) Copyright der Vorlage liegt bei http://www.on-mouseover.de/templates/-->
<link rel="stylesheet" type="text/css" href="format.css" >
<script language="javascript" type="text/javascript">
function toggleNode(node)
      {
        var nodeArray = node.childNodes;
        for(i=0; i < nodeArray.length; i++)
        {
          node = nodeArray[i];
          if (node.tagName && node.tagName.toLowerCase() == 'div')
            node.style.display = (node.style.display == 'block') ? 'none' : 'block';
        }
      }
</script>
</head>
<body class="inl" topmargin="10" marginheight="10"  leftmargin="10" marginwidth="10" scroll="yes" style="background-color: #000000; background-image: url('')" >



<table border="0" width="474">
    <tr>
        <td width="258" valign="top">



<div  style="border:0px solid green;width:258px;  text-align:center; height:150px"><p onclick="toggleNode(this.parentNode); return  false;">
    <font color="#815630">Tag 24<img border="0" src="stern.gif" width="7" height="5" align="top"></font></p>
    <div style="display: none;" border="1px">
        <p align="center">



<b><a href="http://images.fringo.de/userfiles/i/G/H/I/H/dmudpALqMG18Rz2r4rbUd0.jpg" target="_blank"><img src="http://www.rauchfrei.x-pressive.com/footer1377371490_5530.png" alt="Rauchfrei-Ticker by X-PRESSIVE.COM" border="0" /></a><br>
<br>
&nbsp;</b> <br>
<font color="#815630">Fick dich, Tabak. Ich (b)rauch dich nicht.</font><br>


</p></div></div>

        <p>&nbsp;</td>
        <td width="206" valign="top">



<div  style="border:0px solid green;width:204px;  text-align:center; height:61px"><p onclick="toggleNode(this.parentNode); return  false;">
    <font color="#815630">Tag 28</font></p>
    <div style="display: none;" border="1px"><font color="#815630">So langsam
        wird's was mit der Homepage. :)</font></div></div>

        <p>&nbsp;</td>
    </tr>
</table>

</body>
</html>

Ich hätte es gerne wie folgt:



Sodass sich der aufklappbare Text dann alleine seinen Platz bahnt, die Links aber direkt nebeneinander und untereinander stehen würden.

Ich hoffe, ich konnte mein Anliegen deutlich machen.^^ Und sorry, dass ich so einen alten Thread wieder rauskrame. Aber wie gesagt, bin über Google drauf gestoßen und der Code von noxTo ist toll. :)

lg
midnight
 
Zuletzt bearbeitet:
Wenn Du etwas nebeneinander stellen willst, dann musst Du das per CSS machen. Da Du noch eine Tabelle verwendest, wird das jedoch etwas schwierig werden. Wenn Du konkrete Hilfe hilft, wäre ein Link zur Seite für uns und für dich hilfreicher.
 
Oh Gott, mit CSS kenn ich mich noch weniger aus als mit HTML. :( Aber hier ist meine Homepage: Universe

Was die Tabelle angeht: Die muss nicht zwingend drin bleiben. Die habe ich nur eingefügt, weil ich auf meine eigene Weise versuchen wollte, die aufklappbaren Links nebeneinander und untereinander zu setzen. Also die Tabelle kann auch gerne raus.^^
 
Bevor Du weiter JavaScript und CSS lernst würde ich dir nahelegen erstmal HTML richtig zu lernen. Aktuell ist der Quellcode fehlerhaft, und wie schon gesagt so ungünstig geschrieben, dass man damit schwer etwas anfangen kann. Schau dir nur mal die Liste der Fehler an:
http://validator.w3.org/check?verbose=1&uri=http://home.arcor.de/smokingcaterpillar/universe

Und dann was bei HTML-Dokumenten Pflicht ist:
http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp

Und wie man moderne Webseiten mit HTML und CSS gestaltet:
http://www.css4you.de/

Und ja, aller Anfang ist schwer :|
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben