javascript-Anzeigen und Ausblenden von Div-Elementen

Question

Ich bin neu in Javascript und habe derzeit einen Artikel, der aus der Datenbank abgerufen wird.Der Artikel enthält zwei Zeilen. Titelleiste & Inhalt es gibt ungefähr 100 davon in meiner Datenbank.Ziel ist es nun, zuerst alle Titel aufzulisten und wenn ein Benutzer auf einen Titel klickt, den relevanten Inhalt darunter anzuzeigen.Ich kann das aber so machen.

<?php
//mysql query here...
foreach($result as $row) { ?>
<div id='title'> <?= $row['title'] ?> </div>
<div id='<?= $row['id'] ?>' style='display:none' 
             onclick=showContent(<?= $row['id'] ?>) > <?= $row['content'] ?> 
</div>
<?php } ?>

Das Javascript zum Ausblenden der Show der Inhalt ist dies:

<script type='text/javascript'>
function showContent(id){
    document.getElementById(id).style.display='inline';
}
</script>

Der showContent() funktion verbirgt das Div basierend auf der ID, die durch den Parameter übergeben wurde.Das einzige Problem ist jedoch, dass ich andere zuvor angezeigte Divs zum Abschneiden benötige, wenn ein neues geöffnet wird.

Das heißt, der Inhalt sollte nur einmal sichtbar sein, wenn Sie dann auf einen anderen Titel klicken, sollte der zuvor geöffnete Inhalt verschwinden und nur der neue Inhalt sollte erscheinen.

Ich hoffe, das ergab Sinn.da mir die Grammatik fehlt, um alles zu erklären.Ich habe versucht, hier ein kleines Beispiel zu geben, das aus irgendeinem Grund überhaupt nicht zu funktionieren scheint, aber in meinem lokalen Host http://jsfiddle.net/YL6aH/

---

BEARBEITEN:

Meine vollständige PHP-Schleife, zusammen werden alle js / html

    <?php 
            $articlesForPreview = $createQuery
                ->query("SELECT * FROM timeline");              
                $fetchAll = $articlesForPreview->fetchAll(PDO::FETCH_ASSOC);    
                foreach($fetchAll as $row) {?>
                <div id='timeline_container'>
                <span class='timeline_date'> <?= $row['time'] ?></span>
                <span class='timeline_title'> <a href='#' onclick=timeline(<?= $row['id'] ?>)><?= $row['title'] ?></a></span>
                <p id='<?= $row['id'] ?>' style='display:none;'> <?= $row['event'] ?></a></span>
            </div>

            <?php }?>



    </aside>
</section>

<script type='text/javascript'>
function timeline(id){
    document.getElementById(id).style.display='inline';
}
</script>

<footer id='footer_container'> 

Answer 1

Sie können sich einfach das letzte sichtbare Element merken:

var active;
function showContent(id){
    if (active) active.style.display = 'none'; // hide previously visible element
    active = document.getElementById(id);    // keep track of the element you are about to show
    active.style.display='inline'; // show the new element
}

Beachten Sie, dass bei dieser Lösung zunächst keine Elemente sichtbar sind und danach jeweils nur ein Element sichtbar ist.

Answer 2

Du solltest das versuchen :

function showContent(id){
    $('.active').hide().removeClass('active');
    $('#'+id).show().addClass('active');
}

Ich sehe auch, dass Sie mehrere Elemente mit haben werden id=title, Sie müssen ändern Sie es, um jedes Element einzigartig zu machen.

Answer 3

Sie können alle Elemente mit einem Klick auf "Inhalt anzeigen" durchgehen, alle ausblenden und anschließend nur das gewünschte Element anzeigen.

function showContent(id){
    var allElements = document.getElementsByTagName('*');
    for ( var i = 0; i<allElements.length; i++ ) {    
        if ( (allElements[i].onclick + "").indexOf("showContent") >= 0) {
            allElements[i].style.display = "none";       
        }
    }
    document.getElementById(id).style.display='inline';
}

Answer 4

Ich bin selbst ziemlich neu in Javascript und jQuery, aber eines der Dinge, die wir gerade in meinem Kurs gemacht haben, war die Akkordeonanzeige, in der Sie Ereignishandler an das Dokument anhängen.bereit für die Klickereignisse für die Header-Objekte und ihre div-untergeordneten Elemente, und dies geschah durch Vertauschen der CSS-Klassen für die Klickereignisse...verwenden Sie CSS?in unserer Version würde jedes Mal, wenn wir auf ein Plus klickten, die Anzeige erweitert, um die Divs unten anzuzeigen, und wenn Sie auf das Minusbild klicken, würden sie geschlossen...unsere haben es für alle getan, aber Sie sollten in der Lage sein, dies sogar zu codieren, um alle diese Anzeigen zu "schließen" und dann nur die Divs zu öffnen / anzuzeigen, die untergeordnete Elemente für das angeklickte Element sind...ist es das, wonach du suchst?