javascript afficher et masquer l'élément div

Question

Je suis nouveau sur Javascript et j'ai actuellement un article en cours de récupération dans la base de données. L'article comporte deux lignes. titre & contenu il y en a environ 100 dans ma base de données.Désormais, l'objectif est de lister d'abord tous les titres, et lorsqu'un utilisateur clique sur un titre, de faire apparaître le contenu pertinent en dessous.Je peux le faire cependant de cette façon.

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

Le javascript pour masquer l'affichage du contenu est le suivant :

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

Le showContent() La fonction masque le div en fonction de l'identifiant transmis via le paramètre.Mais le seul problème est que j'ai besoin que d'autres divs précédemment affichés soient tronqués lorsqu'un nouveau s'ouvre.

Cela signifie que le contenu ne doit être visible qu'une seule fois, puis lorsque vous cliquez sur un autre titre, le contenu précédemment ouvert doit disparaître et seul le nouveau contenu doit apparaître.

J'espère que cela avait du sens.car il me manque la grammaire pour tout expliquer.J'ai essayé de donner un petit exemple ici, qui, pour une raison quelconque, ne semble pas fonctionner du tout, mais fonctionne dans mon hôte local. http://jsfiddle.net/YL6aH/

---

ÉDITÉ:

Ma boucle PHP complète, avec tous les 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

Vous pouvez simplement mémoriser le dernier élément 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
}

Gardez à l’esprit que cette solution commence avec aucun élément visible et ne permet ensuite qu’un seul élément à la fois.

Answer 2

Tu devrais essayer ceci :

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

Je vois aussi que vous aurez plusieurs éléments avec id=title, toi doit changez-le pour rendre chaque élément unique.

Answer 3

Vous pouvez parcourir tous les éléments d'un simple clic sur "showContent", les masquer tous, puis afficher simplement celui que vous voulez.

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

Je suis moi-même assez nouveau dans Javascript et JQuery, mais l'une des choses que nous venons de faire dans le cours que je suis était l'affichage en accordéon, où vous attachez des gestionnaires d'événements dans le document. Prêt pour les événements de clic pour les objets d'en-tête, et leurs éléments enfants div, et cela a été fait en échangeant les classes CSS sur les événements de clic...est-ce que tu utilises du CSS ?dans notre version, chaque fois que nous cliquions sur un plus, l'affichage s'agrandissait pour afficher les divs ci-dessous, et en cliquant sur l'image moins, cela les fermait...le nôtre l'a fait pour chacun d'eux, mais vous devriez pouvoir coder cela même pour "fermer" tous ces affichages, puis ouvrir/afficher uniquement les divs qui sont des enfants de l'élément cliqué...c'est ce que tu cherches ?