Visualización de JavaScript y Ocultar elemento div

Question

Soy nuevo en JavaScript, y actualmente tengo un artículo que se está recuperando de la base de datos, el artículo tiene dos filas. title & Contenido Hay alrededor de 100 de estos en mi base de datos. Ahora, el objetivo es enumerar primero todos los títulos, y cuando un usuario hace clic en un título, para que el contenido relevante aparezca debajo de él. Puedo hacer esto, sin embargo de esta manera.

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

El JavaScript para ocultar el programa El contenido es este:

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

La función GENACODICETGODEDOCODE oculta el div en función de la identificación pasada por el parálisis. Pero, el único problema es que, necesito que otros dives anteriormente se muestren para tructar cuando se abre una nueva.

Significado, el contenido debe ser visible solo una vez, luego, cuando haga clic en otro título, el contenido abierto anteriormente debe desaparecer y solo debe aparecer el nuevo contenido.

Espero que tenga sentido. Como me falta la gramática para explicarlo todo. Intenté darle un pequeño ejemplo aquí, lo que por alguna razón no parece funcionar en absoluto, sino que en mi localhost http: / /jsfiddle.net/yl6ah/

---

editado:

Mi bucle Full PHP, juntos todos los 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

Simplemente puede recordar el último elemento que está visible:

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
}

Tenga en cuenta que esta solución comienza sin elementos visibles y, después de eso, solo permite que un elemento sea visible a la vez.

Answer 2

Debes probar esto:

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

Veo también que tendrá múltiples elementos con id=title, usted debe cambiarlo para hacer que cada elem sea único.

Answer 3

Puede pasar por todos los elementos con una opción de "Showcontent", escálerlos a todos, después, solo puede mostrar el que desea.

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

Soy bastante nuevo para JavaScript y JQuery Muy, pero una de las cosas que acabamos de hacer en la clase que estoy tomando fue la pantalla de acordeón, donde adjuntas manejadores de eventos en el documento. Para los eventos de clic para elObjetos de encabezado, y sus elementos DIV para niños, y se hizo intercambiando las clases CSS en los eventos de clic ... ¿Está usando CSS?En nuestra versión, en cualquier momento hicimos clic en una ventaja, expandiría la pantalla para mostrar los DIV a continuación, y haciendo clic en la MINUS PIC, los cerraría ... los nuestros lo hicieron para todos ellos, pero deberías poder codificar esoIncluso para "cerrar" todas esas pantallas, y luego abrir / mostrar solo los DIVs que son los niños para que el artículo haga clic ... ¿es eso lo que está buscando?