DIV-Box anzeigen/verstecken mit JavaScript

B

blizz-faad

Hallo Leute,

ich möchte gerne mit Hilfe von Javascript eine DIV-Box anzeigen bzw. wenn angezeigt verstecken lassen. Muss nichts aufwendiges sein.
Habe woanders schon etwas gefunden, funktioniert nur leider nicht.

Code:
DIV auf display:none setzen und mit document.getElementById("ersterContainer").style.display = "block"; aktivieren
 
Am besten du postest mal deinen Quelltext, vllt. ist da auch nur ein Fehler.

Eine weitere Frage ist auch, mit welcher Aktion das aktiviert werden soll?
z.B. durch einen knopf druck oder aktivieren einer checkbox etc.
Code:
var elem1=document.getElementById("sw");
elem1.style.visibility == "visible"

HTML:
<div id="sw" style="visibility:collapse;">

Gruß
Evo
 
Zuletzt bearbeitet:
HTML:
<div style="display: block;" id="ele">Div-Box<br />
<a href="#" onclick="document.getElementById('ele').style.display = 'none'"> Verstecken</a>
</div>
<br /><br />
<a href="#" onclick="document.getElementById('ele').style.display = 'block'"> Anzeigen</a>

So funktionierts.
 
So auch :)

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-04-05">

<title></title>

<style type="text/css">
#ersterContainer, #zweiterContainer { display:none; }
</style>

<script type="text/javascript">
function showhide(divid) {
obj = document.getElementById(divid);
obj.style.display = obj.style.display == 'block' ? 'none' : 'block';
}
</script>

</head>
<body>

<ul>
    <li>
        <a href="#" onclick="showhide('ersterContainer');return false;">Anzeigen / Verstecken</a>
        <div id="ersterContainer">foobar</div>
    </li>
    <li>
        <a href="#" onmouseover="showhide('zweiterContainer');" onmouseout="showhide('zweiterContainer');">Anzeigen / Verstecken</a>
        <div id="zweiterContainer">foobar</div>
    </li>
</ul>

</body>
</html>


mfg Maik
 
Und wie verhält sich das bei einer row Tabelle ?

Ich möchte in diesem Fall den $row['text'] ein und ausblenden

PHP:
<table class="table table-hover">
        <thead>
            <td>Sendedatum</td>
            <td>Versender</td>
            <td>Einrichtung/Firma</td>
            <td>Anprechpartner</td>
            <td>Adresse</td>
            <td>Kontakt</td>
            <td>Text</td>
            <td>&nbsp;</td>
            <td align="center">Löschen</td>
        </thead>
        <?php
        foreach ($pdo->query($sql) as $row) {
        ?>
        <tbody>
            <td><?php echo date('d.m.Y', strtotime($row['datum'])) ?></td>
            <td><?php echo $row['absende_vorname'].' '.$row['absende_nachname'] ?></td>
            <td><?php echo $row['einrichtung_name'] ?></td>
            <td><?php echo $row['anrede'] ?> <?php echo $row['vorname'] ?> <?php echo $row['nachname'] ?></td>
            <td><?php echo $row['strasse'] ?> <?php echo $row['nr'] ?><br /><?php echo $row['plz'] ?> <?php echo $row['ort'] ?></td>
            <td>Telefon: <?php echo $row['telefon'] ?><br />Email: <?php echo $row['email'] ?></td>
            <td>
            <?php echo $row['text'] ?>
            </td>
            <td>&nbsp;</td>
            <td align="center">
            <form action="#" method="post">
                <input type="hidden" name="id" value="<?php echo $row["id"] ?>">
                <button type="submit" name="submit" class="btn btn-default btn-xs">
                <span class="glyphicon glyphicon-trash" style="padding:3px 3px 3px 3px; color:red;"></span>
                </button>
            </form>
            </td>
        </tbody>
        <?php } ?>
    </table>
 
  1. Da es hier um Javascript geht, wäre es besser, wenn Du den generierten HTML-Text posten würdest.
  2. Gleiche Frage wie oben:
Eine weitere Frage ist auch, mit welcher Aktion das aktiviert werden soll?
z.B. durch einen knopf druck oder aktivieren einer checkbox etc.

3. Wirklich für jede Tabellenzeile ein neues tbody?
 
Hi,
Hier der gesamte Text
PHP:
<?php
//error_reporting(E_ALL);
//ini_set('display_errors', 1);

require_once("head.php");
require_once("../../inc/config.inc.php");

$sql = "SELECT * FROM Schriftverkehr ORDER BY datum DESC";   

$id = $_POST['id'];   
$statement = $pdo->prepare("DELETE FROM Schriftverkehr WHERE id = $id");
$statement->execute(array('id' => $user["id"]));

require_once("navi.php");
?>

<style>
thead { background-color:#F0F0F0; color:green; font-size:12px; }
tbody {  font-size:11px; }
</style>

<div class="container" style="margin-bottom:100px;">
    <h1>Allgemein gesendete Emails</h1>
    <hr />
    <table class="table table-hover">
        <thead>
            <td>Sendedatum</td>
            <td>Versender</td>
            <td>Einrichtung/Firma</td>
            <td>Anprechpartner</td>
            <td>Adresse</td>
            <td>Kontakt</td>
            <td>Text</td>
            <td>&nbsp;</td>
            <td align="center">Löschen</td>
        </thead>
        <?php
        foreach ($pdo->query($sql) as $row) {
        ?>
        <tbody>
            <td><?php echo date('d.m.Y', strtotime($row['datum'])) ?></td>
            <td><?php echo $row['absende_vorname'].' '.$row['absende_nachname'] ?></td>
            <td><?php echo $row['einrichtung_name'] ?></td>
            <td><?php echo $row['anrede'] ?> <?php echo $row['vorname'] ?> <?php echo $row['nachname'] ?></td>
            <td><?php echo $row['strasse'] ?> <?php echo $row['nr'] ?><br /><?php echo $row['plz'] ?> <?php echo $row['ort'] ?></td>
            <td>Telefon: <?php echo $row['telefon'] ?><br />Email: <?php echo $row['email'] ?></td>
            <td>
            <?php echo $row['text'] ?>
            </td>
            <td>&nbsp;</td>
            <td align="center">
            <form action="#" method="post">
                <input type="hidden" name="id" value="<?php echo $row["id"] ?>">
                <button type="submit" name="submit" class="btn btn-default btn-xs">
                <span class="glyphicon glyphicon-trash" style="padding:3px 3px 3px 3px; color:red;"></span>
                </button>
            </form>
            </td>
        </tbody>
        <?php } ?>
    </table>
   
   
  
  
</div>


Wirklich für jede Tabellenzeile ein neues Body?

Ja ? Warum nicht ? so erhalte ich in der Tabelle für jeden Eintrag eine Zeile
 
mein Versuch..
Code:
<script type="text/javascript">
function showhide(divid) {
obj = document.getElementById(divid);
obj.style.display = obj.style.display == 'block' ? 'none' : 'block';
}
</script>

PHP:
<a href="#" onclick="showhide('text');return false;">Text anzeigen</a>
            <div style="display:none" id="text">
            <?php echo $row['text'] ?>
            </div>

Aber dann öffnet sich nur der Test in der ersten Spalte
 
Zuletzt bearbeitet:
Wirklich für jede Tabellenzeile ein neues Body? Ja ? Warum nicht ? so erhalte ich in der Tabelle für jeden Eintrag eine Zeile
IMO nicht: tbody sollte es in jeder Tabelle nur einmal geben. Für das Anlegen einer Zeile ist <tr> zuständig!

mein Versuch..
Code (Javascript):
  1. <script type="text/javascript">
  2. function showhide(divid) {
  3. obj = document.getElementById(divid);
  4. obj.style.display = obj.style.display == 'block' ? 'none' : 'block';
  5. }
  6. </script>
PHP:
  1. <a href="#" onclick="showhide('test');return false;">Text anzeigen</a>
  2. <div style="display:none" id="text">
  3. <?php echo $row['text'] ?>
  4. </div>
Aber dann öffnet sich nur der Test in der ersten Spalte

Es wurde zwar oben so vorgeschlagen aber IMO ist ein a-Tag hier fehl am Platze, denn es handelt sich lediglich um eine Schaltfläche, die einen Klick entgegen nehmen soll.

Wo soll den diese Schaltfläche sein? In jeder Zeile eine für die Zelle in der selben Zeile?

Und es wäre hilfreich, wenn Du den generierten HTML-Text posten würdest: Im Browser Rechtsklick auf die Seite und "Quelltext anzeigen" o. ä., je nach Browser.
 
Zurück