exibir javascript e ocultar elemento div

Question

Sou novo em Javascript e atualmente tenho um artigo que está sendo buscado no banco de dados, o artigo possui duas linhas. título & contente existem cerca de 100 deles em meu banco de dados.Agora o objetivo é listar todos os títulos primeiro e, quando o usuário clicar em um título, fazer com que o conteúdo relevante apareça abaixo dele.Eu posso fazer isso dessa maneira.

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

O javascript para ocultar a exibição do conteúdo é este:

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

O showContent() A função oculta o div com base no ID passado pelo paramentador.Mas o único problema é que preciso que outros divs exibidos anteriormente sejam truncados quando um novo for aberto.

Ou seja, o conteúdo deve ficar visível apenas uma vez, então ao clicar em outro título, o conteúdo aberto anteriormente deverá desaparecer e apenas o novo conteúdo deverá aparecer.

Espero que isso tenha feito sentido.pois me falta a gramática para explicar tudo.Tentei dar um pequeno exemplo aqui, que por algum motivo parece não funcionar, mas funciona no meu host local http://jsfiddle.net/YL6aH/

---

EDITADO:

Meu loop PHP completo, junto com todos os 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

Você pode simplesmente lembrar o último item visível:

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
}

Lembre-se de que esta solução começa sem nenhum item visível e depois disso permite que apenas um item fique visível por vez.

Answer 2

Você deveria tentar isso:

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

Vejo também que você terá vários elementos com id=title, você deve altere-o para tornar cada elemento único.

Answer 3

Você pode percorrer todos os elementos com um onclick de "showContent", ocultar todos, depois é só mostrar o que deseja.

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

Eu sou muito novo em javascript e jquery, mas uma das coisas que acabamos de fazer na aula que estou cursando foi a exibição sanfonada, onde você anexa manipuladores de eventos no document.ready para os eventos de clique dos objetos de cabeçalho, e seus elementos filhos div, e isso foi feito trocando as classes css nos eventos de clique...você está usando css?em nossa versão, sempre que clicássemos em um sinal de mais, ele expandiria a exibição para exibir os divs abaixo, e clicar na imagem de menos os fecharia...o nosso fez isso para todos eles, mas você deve ser capaz de codificar isso até mesmo para "fechar" todas essas exibições e, em seguida, abrir/exibir apenas os divs que são filhos do item clicado ...é isso que você está procurando?