Esposizione JavaScript e nascondi elemento div

Question

Sono nuovo a JavaScript, e al momento ho un articolo che viene recuperato dal database, l'articolo ha due righe. Titolo & Content Ci sono circa 100 di questi nel mio database. Ora l'obiettivo è quello di elencare prima tutti i titoli e quando un utente fa clic su un titolo, per rendere il contenuto pertinente compaibile sotto di esso. Posso farlo comunque in questo modo.

<?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 } ?>

.

The JavaScript per nascondere lo spettacolo Il contenuto è questo:

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

.

La funzione showContent() nasconde il div in base all'ID passando attraverso il paramenter. Ma l'unico problema è che, ho bisogno di altri div appena visualizzati in precedenza per tormentare quando si apre uno nuovo.

Significato, il contenuto dovrebbe essere visibile solo una volta, quando si fa clic su un altro titolo, il contenuto precedentemente aperto dovrebbe scomparire e deve essere visualizzato solo il nuovo contenuto.

Spero che abbia avuto senso. Come mi manca la grammatica per spiegare tutto. Ho cercato di dare un piccolo esempio qui, che per qualche ragione non sembra funzionare affatto, ma fa nel mio localhost http: / /jsfiddle.net/yl6ah/

---

.

Modificato:

Il mio loop PHP completo, insieme tutti i 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

Puoi semplicemente ricordare l'ultimo oggetto visibile:

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
}

.

Tieni presente che questa soluzione inizia senza articoli visibili e dopo che consente di visibili solo un oggetto alla volta.

Answer 2

Dovresti provare questo:

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

.

Vedo anche che avrai più elementi con id=title, DEVE Cambialo per rendere ogni elem unico.

Answer 3

Puoi passare attraverso tutti gli elementi con un onclick di "showcontent", nasconderli tutti, in seguito puoi mostrare quello che vuoi.

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

Sono abbastanza nuovo per JavaScript e JQuery me stesso, ma una delle cose che abbiamo appena fatto nella classe, sto prendendo il display della fisarmonica, in cui si allega i gestori di eventi nel documento.Ready per gli eventi del click per ilOggetti di intestazione, e i loro elementi div bambini, ed è stato fatto scambiando le classi CSS per gli eventi click ... stai usando CSS?Nella nostra versione, in qualsiasi momento abbiamo cliccato su un vantaggio, espanderebbe il display per visualizzare i div sotto e facendo clic su The Minus Pic li chiuderà ... Lo ha fatto per tutti, ma dovresti essere in grado di codiceAnche a "chiudere" tutti quei display, e quindi aprire / mostrare solo i divs che sono bambini per l'oggetto cliccarono ... è quello che stai cercando?